Table-layout - Astuces CSS | CSS Almanach 2025

La table-layoutpropriété définit l'algorithme que le navigateur doit utiliser pour disposer les lignes, cellules et colonnes du tableau.

table ( table-layout: fixed; )

Comme expliqué dans la spécification CSS2.1, la disposition des tables en général est généralement une question de goût et variera en fonction des choix de conception. Les navigateurs appliqueront cependant automatiquement certaines contraintes qui définiront la disposition des tableaux. Cela se produit lorsque la table-layoutpropriété est définie sur auto(valeur par défaut). Mais ces contraintes peuvent être levées lorsque table-layoutest défini sur fixed.

Valeurs

auto: le défaut. L'algorithme automatique du navigateur est utilisé pour définir la disposition des lignes, cellules et colonnes d'un tableau. La disposition du tableau qui en résulte dépend généralement du contenu du tableau.
fixed: Avec cette valeur, la mise en page du tableau ignore le contenu et utilise à la place la largeur du tableau, toute largeur de colonne spécifiée et les valeurs d'espacement des bordures et des cellules. Les valeurs de colonne utilisées sont basées sur les largeurs définies sur les colonnes ou les cellules de la première ligne du tableau.
inherit: indique que la valeur est héritée de la table-layoutvaleur de son parent

Pour qu'une valeur de fixedait un effet, la largeur du tableau doit être définie sur autre chose que auto(valeur par défaut de la widthpropriété). Dans les démos ci-dessous, toutes les largeurs de tableau sont définies sur 100%, ce qui suppose que nous voulons que la table remplisse son conteneur parent horizontalement.

La meilleure façon de voir les effets d'un algorithme de disposition de table fixe consiste à utiliser une démo.

Voir la démonstration de Pen pour la propriété de mise en page de table de CSS par Louis Lazaris (@impressivewebs) sur CodePen.

Lorsque vous visualisez pour la première fois la démo ci-dessus, vous remarquerez que la disposition des colonnes du tableau est déséquilibrée et gênante. À ce stade, le tableau utilise l'algorithme par défaut du navigateur pour définir la disposition du tableau, ce qui signifie que le contenu dictera la mise en page. La démo exagère ce fait en incluant une longue chaîne de texte dans une cellule du tableau, tandis que toutes les autres cellules du tableau n'utilisent que deux mots chacune. Comme vous pouvez le voir, le navigateur développe la première colonne pour accueillir le plus gros morceau de contenu.

Si vous cliquez sur le bouton "Basculer la mise en page du tableau: fixe", vous verrez à quoi ressemble la mise en page du tableau lorsque l'algorithme "fixe" est utilisé. Lorsqu'il table-layout: fixedest appliqué, le contenu ne dicte plus la mise en page, mais à la place, le navigateur utilise toutes les largeurs définies à partir de la première ligne du tableau pour définir les largeurs de colonne. Si aucune largeur n'est présente sur la première ligne, les largeurs de colonne sont réparties de manière égale dans le tableau, quel que soit le contenu à l'intérieur des cellules.

D'autres exemples peuvent aider à clarifier ce point. Dans la démonstration suivante, la table a un élément dont le premier élément a une largeur de 400px. Remarquez dans ce cas, le basculement table-layout: fixedn'a aucun effet.

Voir la démonstration de Pen pour la propriété de mise en page de table de CSS par Louis Lazaris (@impressivewebs) sur CodePen.

Cela se produit parce que l'algorithme de mise en page par défaut dit essentiellement «faites la première colonne de 400 pixels de large et distribuez les colonnes restantes en fonction de leur contenu». Puisque les trois autres colonnes ont le même contenu les unes que les autres, il n'y aura aucun changement. Mais ajoutons maintenant du contenu textuel supplémentaire à l'une des autres colonnes:

Voir la démonstration de Pen pour la propriété de mise en page de table de CSS avec largeur de colonne et contenu variable par Louis Lazaris (@impressivewebs) sur CodePen.

Maintenant, si vous cliquez sur le bouton bascule, vous verrez les colonnes s'ajuster pour s'adapter à une mise en page fixe, quel que soit le contenu. Encore une fois, la même chose se produit; la première colonne est fixée à 400px, puis les colonnes restantes sont divisées également. Mais cette fois, comme l'une des colonnes a un contenu supplémentaire, la différence est perceptible.

Comment un algorithme de mise en page fixe détermine la largeur des colonnes

Les deux démos suivantes devraient vous aider à comprendre que la première ligne du tableau est ce qui aide à définir les largeurs de colonne d'un tableau défini sur table-layout: fixed.

Voir la démonstration de Pen pour la mise en page du tableau CSS avec la cellule dans la ligne 1 donnée largeur définie par Louis Lazaris (@impressivewebs) sur CodePen.

Dans la démonstration ci-dessus, la première cellule de la première ligne du tableau a une largeur de 350 px. La bascule table-layout: fixedajuste les autres colonnes, mais la première reste la même. Maintenant, essayez la démo suivante:

Voir la démonstration de Pen pour la mise en page du tableau de CSS avec la cellule dans la ligne 2 donnée largeur définie par Louis Lazaris (@impressivewebs) sur CodePen.

Dans ce cas, c'est la deuxième ligne qui a une largeur attachée à sa première cellule de tableau. Désormais, lorsque vous cliquez sur le bouton bascule, toutes les largeurs de colonne sont ajustées. Encore une fois, c'est parce que l'algorithme de mise en page fixe utilise la première ligne pour déterminer les largeurs de colonne, et le résultat final est qu'il distribue les largeurs de manière égale.

Avantages d'un algorithme de mise en page fixe

Les avantages esthétiques de l'utilisation table-layout: fixeddevraient être évidents à partir des démonstrations ci-dessus. Mais l'autre avantage majeur est la performance. La spécification fait référence à l'algorithme fixe comme un algorithme «rapide», et pour une bonne raison. Le navigateur n'a pas besoin d'analyser tout le contenu de la table avant de déterminer la taille des colonnes; il suffit d'analyser la première ligne. Le résultat est donc un traitement plus rapide de la mise en page du tableau.