Comment faire - Tableaux réactifs
Découvrez comment créer un tableau réactif.
Tableaux réactifs
Un tableau réactif affichera une barre de défilement horizontale si l'écran est trop petit pour afficher le contenu complet. Redimensionnez la fenêtre du navigateur pour voir l'effet :
Prénom | Nom de famille | Points | Points | Points | Points | Points | Points | Points | 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 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Veille | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 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 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Pour créer une table responsive, ajoutez un élément conteneur avec overflow-x:auto
autour de la <table> :
Exemple
<div style="overflow-x:auto;">
<table>
...
</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" ou auto est défini).
Conseil : accédez à notre didacticiel sur les tableaux CSS pour en savoir plus sur la façon de styliser les tableaux.