Table-layout - Propriété CSS
Résumé des caractéristiques de la propriété table-layout
auto | fixedautotable-layout passe d'une valeur à l'autre sans transition.Schéma syntaxique de table-layout.
table-layoutLes liens du schéma donnent accès à plus de détails
Description de la propriété table-layout.
La propriété table-layout définit si les largeurs des colonnes d'un tableau sont déterminées
d'après leur contenu ou d'après un calcul prédéfini.
Valeurs pour table-layout.
- table-layout: auto;
Le navigateur détermine les largeurs des colonnes en fonction de leur contenu sauf pour les colonnes dont la largeur est explicitement indiquée. Cette dernière peut être spécifiée sur une cellule de n'importe quelle ligne ou sur la balise col.
- table-layout: fixed;
Toutes les colonnes du tableau ont la même largeur sauf celles dont la largeur est précisée. Attention ! La largeur doit être indiquée sur la cellule de la première ligne du tableau ou sur la balise col.
Cette valeur n'a d'effet que si la largeur totale du tableau est définie à une valeur différente de
auto.
Valeurs communes à toutes les propriétés :
table-layout: initial (auto)
table-layout: inherit
table-layout: revert
table-layout: revertLayer
table-layout: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Animation de la propriété table-layout.
L'exemple a été choisi volontairement avec des contenus très courts dans la première colonne et des contenus beaucoup plus
longs dans la colonne numéro 2.
D'autre part, la largeur du tableau a été fixée, afin que les différences de largeurs de colonnes ne soient pas absorbées par un
agrandissement ou un rétrécissement du tableau. Sa hauteur a été également fixée pour éviter le tressautement de la suite de*
la page à chaque étape de l'animation.
| CSS | Cascading Styles Sheet |
| HTML | HyperText Markup Language |
Exemple interactif avec la propriété table-layout.
Le simulateur montre bien l'effet de la propriété table-layout :
avec la valeur auto, c'est le contenu des cellules qui définit leur largeur (dans chaque colonne, le plus grand des contenus),
tandis que la valeur fixed définit toutes les colonnes à la même largeur.
La largeur du tableau a été fiée à 350 pixels, mais aucune des largeurs de colonne n'a été définie.
C'est dans ce cas de figure que l'effet de la propriété table-layout est le plus visible.
| Janvier | Avril | Juilet | Octobre |
| Février | Mai | Août | Novembre |
| Mars | Juin | Septembre | Décembre |
Prise en charge par les navigateurs (compatibilité).
Comme on peut le voir sur le tableau ci-dessous, la prise en charge de la propriété table-layout est excellente.
table-layoutNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
Historique de la propriété table-layout.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Introduction de la propriététable-layoutpour optimiser les mises en page sous forme de tableaux (CSS version 2.xx).
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Tableaux - Niveau 3
Propriété inchangée dans le niveau 3 du module "Tables".25 Octobre 2016Document de travail.
Voir aussi, au sujet des tableaux.
La spécification "Module CSS - Tableaux" éditée par le W3C, regroupe toutes les définitions concernant spécifiquement les tableaux, mais de nombreuses autres propriétés plus générales peuvent s'appliquer aussi aux tableaux : dimensions, marges, etc.