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 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> |
Crée votre site web au meilleur prix💰