Propriété CSS table-layout
Exemple
Définissez différents algorithmes de disposition de table :
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Définition et utilisation
La table-layout
propriété définit l'algorithme utilisé pour disposer les cellules, les lignes et les colonnes du tableau.
Astuce : Le principal avantage de la disposition des tables : fixe ; est que la table rend beaucoup plus rapidement. Sur les grands tableaux, les utilisateurs ne verront aucune partie du tableau tant que le navigateur n'aura pas rendu l'intégralité du tableau. Ainsi, si vous utilisez table-layout: fixed, les utilisateurs verront le haut du tableau pendant que le navigateur charge et affiche le reste du tableau. Cela donne l'impression que la page se charge beaucoup plus rapidement !
Valeur par défaut: | auto |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS2 |
Syntaxe JavaScript : | objet .style.tableLayout="fixe" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
Syntaxe CSS
table-layout: auto|fixed|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
auto | Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout | |
fixed | Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : Tableau CSS
Référence HTML DOM : propriété tableLayout