Tableau responsive CSS
Tableau réactif
Un tableau réactif affichera une barre de défilement horizontale si l'écran est trop petit pour afficher tout le contenu :
Prénom | Nom de famille | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Julie | Forgeron | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Veille | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Ajoutez un élément conteneur (comme <div>) overflow-x:auto
autour de l'élément <table> pour le rendre responsive :
Exemple
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Remarque : sous OS X Lion (sur Mac), les barres de défilement sont masquées par défaut et ne s'affichent que lorsqu'elles sont utilisées (même si "overflow:scroll" est défini).
Plus d'exemples
Cet exemple montre comment créer un tableau fantaisie.
Cet exemple montre comment positionner la légende du tableau.
Propriétés du tableau CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |