La propriété table-layout
définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
etcol
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 valeurauto
. 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 initiale | auto |
---|---|
Applicabilité | des éléments table and inline-table |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 14 | 12 | 1 | 5 | 7 | 1 |
Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Support simple | 1.5 | ? | Oui | 4 | 9.8 | 3 | ? |
É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,