CSS Tables Responsives
Tables Responsives CSS
Une table responsive affichera une barre de défilement horizontale si l'écran est trop petit pour afficher l'intégralité du contenu.
Redimensionnez la fenêtre du navigateur pour voir l'effet :
| Prénom | Nom | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Comment faire :
Enveloppez l'élément <table> dans un conteneur <div>.
Définissez la propriété overflow-x sur auto pour l'élément <div> :
Exemple
div.tablecontainer {
overflow-x: auto;
} Remarque : Dans OS X Lion (sur Mac), les barres de défilement sont caché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
Créer une table élégante
Cet exemple montre comment créer une table élégante.
Ajouter et positionner une légende de table
Cet exemple montre comment ajouter et positionner une légende de table.
Propriétés des Tables CSS
| Propriété | Description |
|---|---|
| border | Définit toutes les propriétés de bordure en une seule déclaration |
| border-collapse | Spécifie si les bordures des tables doivent être fusionnées ou non |
| border-spacing | Spécifie la distance entre les bordures des cellules adjacentes |
| caption-side | Spécifie le placement d'une légende de table |
| empty-cells | Spécifie s'il faut afficher des bordures et un fond sur les cellules vides d'une table |
| table-layout | Définit l'algorithme de mise en page à utiliser pour une table |