Chargement...

Responsive design tableau


Pour les petits supports - comme les smartphones et les tablettes -, les tableaux deviennent souvent illisibles.
Il existe quelques astuces pour pouvoir les consulter de manière productive même sur les plus petits formats.

Responsive design par defaut des <table>

La manière par défaut de BOOTSTRAP Twitter est d'encadrer un tableau par une div avec la classe "table-responsive"

<div class="table-responsive">
<table>
...
</table>
</div>


Pour centrer le tableau et lui définir une taille minimale et maximale :
<style>
div#list_de_trucs{
margin:10px auto;
width:100%;
min-width:400px;
max-width:700px;
}
div#list_de_trucs table{
margin:0px;
width:100%;
}
</style>
<div id="list_de_trucs" class="table-responsive">
<table>
...
</table>
</div>
Le résultat sera le suivant sur un petit format : Responsive table Et sur un format plus large: Table Responsive

Le responsive table un peu plus poussé

Il est possible de transformer le tableau entièrement et de lui donner un autre sens de lecture, grâce au CSS :
<style>
@media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display:none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align:right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height:100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
}
</style>
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th>Droit</th>
<th>Valeur alphanumérique</th>
<th>Valeur octale</th>
<th>Valeur binaire</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Droit">Aucun droit</td>
<td data-title="Valeur alphanumérique">---</td>
<td data-title="Valeur octale">0</td>
<td data-title="Valeur binaire">000</td>
</tr>
<tr>
<td data-title="Droit">Exécution</td>
<td data-title="Valeur alphanumérique">--x</td>
<td data-title="Valeur octale">1</td>
<td data-title="Valeur binaire">001</td>
</tr>
<tr>
<td data-title="Droit">Ecriture</td>
<td data-title="Valeur alphanumérique">-w-</td>
<td data-title="Valeur octale">2</td>
<td data-title="Valeur binaire">010</td>
</tr>
<tr>
<td data-title="Droit">Ecriture et exécution</td>
<td data-title="Valeur alphanumérique">-wx</td>
<td data-title="Valeur octale">3</td>
<td data-title="Valeur binaire">011</td>
</tr>
<tr>
<td data-title="Droit">Lecture seulement</td>
<td data-title="Valeur alphanumérique">r--</td>
<td data-title="Valeur octale">4</td>
<td data-title="Valeur binaire">100</td>
</tr>
<tr>
<td data-title="Droit">Lecture et exécution</td>
<td data-title="Valeur alphanumérique">r-x</td>
<td data-title="Valeur octale">5</td>
<td data-title="Valeur binaire">101</td>
</tr>
<tr>
<td data-title="Droit">Lecture et écriture</td>
<td data-title="Valeur alphanumérique">rw-</td>
<td data-title="Valeur octale">6</td>
<td data-title="Valeur binaire">110</td>
</tr>
<tr>
<td data-title="Droit">Tous les droits</td>
<td data-title="Valeur alphanumérique">rwx</td>
<td data-title="Valeur octale">7</td>
<td data-title="Valeur binaire">111</td>
</tr>
</tbody>
</table>
</div>
En format large le tableau ressemblera à cela : Table Responsive En format smartphone le tableau sera comme cela: Table Responsive


UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW