table-layout - Propriété CSS
Résumé des caractéristiques de la propriété table-layout
auto
| fixed
auto
table-layout
passe d'une valeur à l'autre sans transition.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
. - table-layout:
initial
; table-layout:inherit
; table-layout:revert
; table-layout:revert-layer
; table-layout:unset
;La valeur initiale est :
.auto
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 |
Simulateur.
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-layout
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que table-layout
.
Les spécifications CSS éditées par le W3C sont organisées en modules. table-layout
fait partie du Module CSS - Tableaux (CSS Table Module). Les définitions suivantes sont également décrites dans ce même module.