Fichier table.css - Wiki

Dernière mise à jour : 04/03/2016 à 19h15

Table des matières

Affichage des tableaux basic
Table responsive basictable.js

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;
}

Pagination footer tableaux

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;
}