Structure d'un thème

Fichier table.css

Le fichier table.css contient les éléments pour l'affichage des tableaux HTML et responsive.

Affichage des tableaux basic



Code CSS :
table {
    margin: 8px 0;
    padding: 0;
    width: 100%;
    border-spacing: 0;
}

Entête du tableau


Code CSS :
table caption {
    margin: 5px 0 5px 20px;
    border-bottom: 1px solid #D1D2D5;
    color: #757679;
    font-size: 13px;
    text-align: left;
}
table thead th {
    padding: 8px;
    background-color: #4D4C50;
    color: #E5E6E6;
    font-size: 1.1em;
    text-align: center;
    font-weight: normal;
}
table thead th:first-child { border-top-left-radius: 3px;  }
table thead th:last-child  { border-top-right-radius: 3px; }
table thead th a         { color: #E5E6E6; }
table thead th a:hover     { color: #FFFFFF; }

Le contenu du tableau


Code CSS :
table tbody td {
    padding: 8px;
    background-color: #F5F5F5;
    border-top: 1px solid #D1D2D4;
    border-left: 1px solid #D1D2D4;
    color: #676A74;
    text-align: center;
}
tr:nth-child(even) td {
    background-color: #FFFFFF;
}
table tbody tr:last-child td {
    border-bottom: 1px solid #D1D2D4;
}
table.bt tbody tr:last-child td {
    border-bottom: none;
}
table.bt tbody tr:last-child td:last-child {
    border-bottom: 1px solid #D1D2D4;
}
table tbody tr td:last-child {
    border-right: 1px solid #D1D2D4;
}
table tbody tr.no-separator td {
    border-top: none;
}
table tbody tr td.no-separator {
    border-left: none;
}
table tbody tr td.no-separator:first-child {
    border-left: 1px solid #D1D2D4;
}

Le pied de tableau


Code CSS :
table tfoot tr th {
    padding: 8px;
    background-color: #F0F0F0;
    border-bottom: 1px solid #D1D2D4;
    color: #AAAAAA;
}
table tfoot tr th:first-child {
    border-left: 1px solid #D1D2D4;
    border-bottom-left-radius: 3px;
}
table tfoot tr th:last-child {
    border-right: 1px solid #D1D2D4;
    border-bottom-right-radius: 3px;
}
table tfoot tr th:only-child {
    text-align: right;
}
table tfoot tr th * {
    vertical-align: middle;
}
table tfoot tr th a {
    color: #676A74;
}
table tfoot tr th select {
    padding: 2px 5px;
}

Patch thead tableaux formates


Code CSS :
table.formatter-table th.formatter-table-head {
    padding: 8px;
    background-color: #4D4C50;
    color: #E5E6E6;
    font-size: 1.4em;
    text-align: center;
    font-weight: normal;
}
table.formatter-table th.formatter-table-head:first-child { border-top-left-radius: 3px;  }
table.formatter-table th.formatter-table-head:last-child  { border-top-right-radius: 3px; }
table.formatter-table th.formatter-table-head a       {    color: #E5E6E6; }
table.formatter-table th.formatter-table-head a:hover {    color: #FFFFFF; }
table.formatter-table th.formatter-table-head p {
    margin-bottom: 0;
}

Taille des colonnes


Code CSS :
.col-smaller { width: 3em;  }
.col-small   { width: 6em;  }
.col-large   { width: 9em;  }
.col-larger  { width: 12em; }
.col-xlarge  { width: 15em; }

Les mini tableaux


Code CSS :
table.mini th,
table.mini td {
    padding: 3px 1px;
    font-size: 11px;
}
@media (max-width: 768px) {
    table.mini th,
    table.mini td {
        padding: 7px 1px;
    }
}
table.mini th a,
table.mini td a {
    font-size: 11px;
}


Code CSS :
table tfoot nav.pagination a {
    color: #8B8D90;
    text-decoration: none;
    padding: 3px 3px;
}
table tfoot nav.pagination a span.current-page {
    color: #CED0D0;
    text-decoration: none;
}

Affichage des tableaux responsive sur les petits ecrans


Code CSS :
@media (max-width: 768px) {
    table thead th,
    table tbody td,
    table tfoot tr th {
        padding: 4px;
        font-size: 0.9em;
    }
}


Table responsive basictable.js



Afin de simplifier l'affichage des tableaux sur smartphone, nous avons choisis d'utiliser le plugin jQuery "basictable". il permet de basculer d'un affichage classique multi-colonne en un affichage condensé sur une colonne.
Code CSS :
table.bt thead th {
    display: none;
}
table.bt thead th:first-child{
    display: block;
    border-radius: 0;
}
@media (min-width:769px){
    table.bt thead th:first-child {
        border-radius: 3px 3px 0 0;
    }
}
table.bt tbody td {
    display: block;
    width: 100%;
    border-right: 1px solid #D1D2D4;
    text-align: left;
    vertical-align: top;
}
table.bt tbody td.no-separator {
    border-left: 1px solid #D1D2D4;
}
table.bt tbody td:before {
    display: inline-block;
    width: 35%;
    content: attr(data-th) " ";
    font-weight: bold;
}
table.bt tbody td.bt-hide {
    display: none;
}
table.bt tbody td .bt-content {
    display: inline-block;
    padding-left: 6px;
    max-width: 100%;
    vertical-align: top;
}
.bt-wrapper.active {
    max-height: 310px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
Cette page a été vue 2453 fois
Annonces