La propriété table-layout définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.

Syntaxe

/* Valeur utilisant un mot-clé */
table-layout: auto;
table-layout: fixed;

/* Valeurs globales */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

Valeurs

auto
Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.
fixed
La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments table et col ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.

Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur auto. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété overflow pour déterminer comment gérer le dépassement.

Syntaxe formelle

auto | fixed

Exemples

HTML

<table class="exemple">
  <tr>
    <td width="7em">Jean</td>
    <td width="7em">Biche</td>
  </tr>
  <tr>
    <td>Jean-Roger-Michel</td>
    <td>du Domaine de la Biche</td>
  </tr>
</table>

CSS

.exemple {
  table-layout: fixed;
}

tr, td {
  border: solid;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Level 2 (Revision 1)
La définition de 'table-layout' dans cette spécification.
Recommendation Définition initiale.

Valeur initialeauto
Applicabilitédes éléments table and inline-table
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 14Edge Support complet 12Firefox Support complet 1IE Support complet 5Opera Support complet 7Safari Support complet 1WebView Android Support complet 1.5Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9.8Safari iOS Support complet 3Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, bsitruk, emmanuelclement, fscholz, Sebastianz, teoli, b_b, FredB, ethertank
Dernière mise à jour par : SphinxKnight,