Comment créer : Tableau responsive

Apprenez à créer un tableau responsive.

Tableau responsive

Si l'écran est trop petit pour afficher tout le contenu, le tableau responsive affichera une barre de défilement horizontale.

Ajustez la taille de 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
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve 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 un tableau responsive, ajoutez un conteneur qui contient overflow-x:auto de l'élément conteneur :

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Essayez-le vous-même

Attention :Dans OS X Lion (Mac), la barre de défilement est masquée par défaut et n'apparaît que lors de son utilisation (même si "overflow:scroll" ou auto est configuré).

Pages associées

Tutoriel :Tableau CSS