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.Single : valeur unique (l'ordre n'intervient pas).Schéma de la syntaxe de table-layout.
table-layout.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
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 :
la largeur du tableau divisé par le nombre de colonnes.
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.
Janvier Juillet Février Août Mars Septembre Avril Octobre Mai Novembre Juin Décembre table-layout:auto - 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.Janvier Juillet Février Août Mars Septembre Avril Octobre Mai Novembre Juin Décembre table-layout:fixed - table-layout: initial; (
auto) table-layout: inherit; table-layout: revert; table-layout: revert-layer; table-layout: revert-rule; table-layout: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,revert-rule,unset.
Exemple d'animation de 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 |
Changer le mode de calcul des largeurs de colonnes avec Javascript.
En Javascript, voici comment modifier la valeur de table-layout.
Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec la notation en camel-case.
let el = document.getElementById('id');
el.style['table-layout'] = 'fixed';
// ou
let el = document.getElementById('id');
el.style.tableLayout = 'fixed';
Lire le mode de calcul des largeurs de colonnes en Javascript.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['table-layout'];
// ou
let el = document.getElementById('id');
let value = el.style.tableLayout;
Avec Javascript, lire la valeur calculée de table-layout.
La valeur calculée est celle qui résulte de l'évaluation de la cascade d'héritage. A défaut la valeur calculée est la valeur initiales de la propriété
{auto dans le cas de table-layout).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('table-layout');
Avec JQuery, lire ou modifier la valeur de table-layout.
JQuery est une libraire Javascript. qui autorise souvent des syntaxes plus courtes que Javascript lui même.
// Lire la valeur :
$('#id').prop('table-layout');
// Écrire la valeur :
$('#id').prop('table-layout', 'fixed');
$('#id').prop('{table-layout': 'fixed'});
Avec JQuery, lire la valeur calculée de table-layout.
let value = $('#id').css('table-layout');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété table-layout et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de la propriété. Dans le cas de
table-layout cela ne fera pas de différence, sauf si vous entrez une valeur incorrecte : dans ce cas la valeur affectée est vide et la valeur
calculée est la valeur initiale.
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 | Juillet | Octobre |
| Février | Mai | Août | Novembre |
| Mars | Juin | Septembre | Décembre |
Compatibilité des navigateurs avec table-layout.
Comme on peut le voir sur le tableau ci-dessous, la prise en charge de la propriété table-layout est excellente.
table-layout qui définit comment sont calculées les largeurs de colonne d'un tableau.table-layoutNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Samsung Internet
Chrome
Edge
Firefox
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Histoire de la propriété table-layout.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernanttable-layoutIntroduction 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
Ce module de spécification définit un système de mise en page basé sur un tableau, optimisé pour le rendu des données tabulaires. Dans ce modèle de disposition, chaque cellule est attribué à une intersection entre un ensemble de lignes consécutives et un ensemble de colonnes consécutives, eux-mêmes générés à partir de la structure de la table et dimensionnés en fonction de leur contenu.
Concernanttable-layoutProprié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.