Attribut TABLE-LAYOUT
Rôle
L’attribut table-layout permet de spécifier si la taille des cellules doit s’adapter au contenu ou si elle est fixée par les dimensions des cellules (même taille si aucune dimension spécifiée)
Version : CSS2
Héritage (inherit) : non
Propriété Javascript : element.style.tableLayout
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
.tablea {
width: 100%;
table-layout: fixed;
}
.tableb {
width: 100%;
table-layout: auto;
}
– Le code HTML
<table border="1" class="tablea">
<tbody><tr>
<td>Il y a beaucoup plus de contenu ici</td>
<td>faible contenu</td>
</tr>
</tbody></table>
<hr>
<table border="1" class="tableb">
<tbody><tr>
<td>Il y a beaucoup plus de contenu ici</td>
<td>faible contenu</td>
</tr>
</tbody>
</table>
Résultat
Compatibilité
L’attribut table-layout est pris en charge par tous les principaux navigateurs
Valeurs
Les différentes valeurs de l’attribut table-layout sont:
- auto
- La taille des cellules est définie par le contenu : valeur par défaut.
Syntaxe :
table-layout : auto - fixed
- La taille des cellules est définie par leur dimension (même taille sinon).
Syntaxe :
table-layout : fixed - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
table-layout : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
table-layout : inherit
