Propriété CSS table-layout

La propriété CSS table-layout définit l'algorithme que le navigateur utilise pour calculer la largeur des cellules, des lignes et des colonnes d'un tableau. Elle propose deux algorithmes possibles — auto et fixed — et le choix entre les deux influe à la fois sur la façon dont le tableau est dimensionné et sur la vitesse à laquelle il s'affiche.

Cette page explique le fonctionnement de chaque algorithme, les cas où il convient d'utiliser fixed, ainsi que les pièges (comme le débordement de texte) qui l'accompagnent.

Fonctionnement des deux algorithmes

auto (valeur par défaut) laisse le contenu décider de la largeur des colonnes. Le navigateur doit lire chaque cellule de chaque ligne avant de pouvoir effectuer la mise en page, puis élargit chaque colonne pour s'adapter à son contenu le plus long. Cela donne un tableau d'aspect naturel, mais signifie aussi qu'un tableau peut se réorganiser au fur et à mesure que le contenu arrive, et que des mots très longs peuvent étirer une colonne au-delà de ce qui était prévu.

fixed ignore le contenu de la plupart des cellules et dimensionne les colonnes à partir de la propriété width du tableau, des largeurs de colonnes explicites (sur les cellules de la première ligne ou sur les éléments <col>), ainsi que des bordures et de l'espacement des cellules. Étant donné que la mise en page ne dépend plus de chaque cellule, le navigateur peut afficher le tableau en un seul passage.

Il existe deux raisons pratiques de choisir fixed :

Performance. Avec auto, un grand tableau ne peut pas être affiché tant que tout le tableau n'a pas été analysé et mesuré. fixed effectue le rendu ligne par ligne au fur et à mesure du chargement, ce qui fait qu'un tableau long apparaît plus rapidement et que la page semble se charger plus vite.
Prévisibilité. Les largeurs de colonnes restent exactement là où vous les avez placées et ne bougent pas lorsque le contenu des cellules change — utile pour les tableaux de données ayant une structure connue.

La contrepartie : avec fixed, un contenu plus large que sa colonne n'élargit pas la colonne. Par défaut, il déborde de la cellule. On associe généralement fixed à word-wrap / overflow-wrap, text-overflow ou overflow pour contrôler ce qui advient du contenu trop large.

Valeur initiale	auto
S'applique à	Éléments de type table et inline-table.
Hérité	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.tableLayout = "fixed";

Syntaxe

Syntaxe CSS de table-layout

table-layout: auto | fixed | initial | inherit;

Exemples

Exemple de la propriété table-layout avec la valeur "fixed" :

Exemple de code CSS table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 40%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 40%</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété table-layout avec les valeurs "auto" et "fixed" :

Exemple de valeurs CSS table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 250px;
      }
      table.t2 {
        table-layout: auto;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 250px</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Avec table-layout: fixed, le premier tableau conserve ses trois colonnes égales de 250px quelle que soit la longueur des noms de villes, tandis que le tableau auto s'étire pour s'adapter à "Saint Petersburg". C'est la différence fondamentale : fixed respecte vos largeurs, auto respecte le contenu.

Contrôle du débordement avec table-layout: fixed

Étant donné que les colonnes fixed ne s'agrandissent pas pour s'adapter à un contenu long, un mot plus long que la colonne sort de la cellule. La solution consiste à effectuer un retour à la ligne ou un rognage. L'exemple ci-dessous présente trois approches courantes côte à côte :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        table-layout: fixed;
        width: 300px;
        border-collapse: collapse;
      }
      td {
        border: 2px solid #666;
        width: 100px;
        padding: 4px;
      }
      .clip {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .wrap {
        overflow-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Overflows by default</td>
        <td class="clip">Supercalifragilisticexpialidocious</td>
        <td class="wrap">Supercalifragilisticexpialidocious</td>
      </tr>
    </table>
  </body>
</html>

La cellule du milieu tronque le long mot avec une ellipse (text-overflow: ellipsis), tandis que la cellule de droite le coupe sur plusieurs lignes (overflow-wrap: break-word).

Valeurs

Valeur	Description	Essayer
auto	Utilise un algorithme de mise en page automatique lorsque le tableau et ses cellules s'adaptent au contenu. Il s'agit de la valeur par défaut de cette propriété.	Essayer »
fixed	Utilise l'algorithme de mise en page de tableau fixe. Les largeurs du tableau, des éléments col et de la première ligne de cellules définissent les largeurs du tableau et des colonnes.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété de son élément parent.

Propriétés associées

table-layout fonctionne en complément des autres propriétés CSS qui stylisent les tableaux :

border-collapse — choisir entre des bordures de cellules séparées ou fusionnées.
border-spacing — définir l'espace entre les cellules lorsque les bordures sont séparées.
empty-cells — afficher ou masquer les bordures et les arrière-plans des cellules sans contenu.
width — définir la largeur globale du tableau sur laquelle l'algorithme fixed s'appuie.
white-space — contrôler le retour à la ligne du texte dans les cellules à largeur fixe.

Exercice

Pratique

Que fait la propriété CSS table-layout ?

Elle vous permet de déterminer la largeur d'affichage des colonnes de la page web.Elle vous permet de modifier le style de police du texte dans le tableau.Elle définit l'algorithme de mise en page à utiliser pour un tableau.Elle modifie la couleur de l'arrière-plan du tableau.Elle définit le style de bordure du tableau.