Eigenschap CSS -tabellay-out
Voorbeeld
Stel verschillende algoritmen voor tafelindeling in:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Definitie en gebruik
De table-layout
eigenschap definieert het algoritme dat wordt gebruikt om tabelcellen, rijen en kolommen in te delen.
Tip: Het belangrijkste voordeel van tafelopstelling: vast; is dat de tabel veel sneller rendert. Op grote tabellen zien gebruikers geen enkel deel van de tabel totdat de browser de hele tabel heeft weergegeven. Dus als je table-layout: fixed gebruikt, zien gebruikers de bovenkant van de tabel terwijl de browser de rest van de tabel laadt en rendert. Dit geeft de indruk dat de pagina een stuk sneller laadt!
Standaardwaarde: | auto |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS2 |
JavaScript-syntaxis: | object .style.tableLayout="vast" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
CSS-syntaxis
table-layout: auto|fixed|initial|inherit;
Eigendomswaarden
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 |
Gerelateerde pagina's
CSS-zelfstudie: CSS-tabel
HTML DOM-referentie: eigenschap tableLayout