table-layout
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété table-layout définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.
Exemple interactif
table-layout: auto;
width: 150px;
table-layout: fixed;
width: 150px;
table-layout: auto;
width: 100%;
table-layout: fixed;
width: 100%;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>Lion</td>
<td>Africa</td>
</tr>
<tr>
<td>Norwegian Lemming</td>
<td>Europe</td>
</tr>
<tr>
<td>Seal</td>
<td>Antarctica</td>
</tr>
<tr>
<td>Tiger</td>
<td>Asia</td>
</tr>
</table>
</section>
table {
border: 1px solid #139;
}
th,
td {
border: 2px solid #a19;
padding: 0.25rem 0.5rem;
}
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
tableetcolou 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éoverflowpour déterminer comment gérer le dépassement.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | des éléments table and inline-table |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
table-layout =
auto |
fixed
Exemples
Cet exemple utilise table-layout: fixed et une largeur donnée (avec la propriété width) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété text-overflow et l'application d'une ellipse pour les mots trop longs pour le tableau.
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;
width: 120px;
border: 1px solid red;
}
tr,
td {
border: solid;
}
td {
border: 1px solid blue;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Résultat
Spécifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # width-layout |
Compatibilité des navigateurs
Chargement…