CSS table-layout- Eigenschaft
Beispiel
Legen Sie verschiedene Tabellenlayoutalgorithmen fest:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Definition und Verwendung
Die table-layout
Eigenschaft definiert den Algorithmus, der zum Layout von Tabellenzellen, -zeilen und -spalten verwendet wird.
Tipp: Der Hauptvorteil des Tabellenlayouts: behoben; ist, dass die Tabelle viel schneller rendert. Bei großen Tabellen sehen Benutzer keinen Teil der Tabelle, bis der Browser die gesamte Tabelle gerendert hat. Wenn Sie also table-layout: fixed verwenden, sehen Benutzer den oberen Rand der Tabelle, während der Browser den Rest der Tabelle lädt und rendert. Dies erweckt den Eindruck, dass die Seite viel schneller geladen wird!
Standardwert: | Auto |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS2 |
JavaScript-Syntax: | Objekt .style.tableLayout="behoben" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
CSS-Syntax
table-layout: auto|fixed|initial|inherit;
Eigenschaftswerte
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 |
Verwandte Seiten
CSS-Tutorial: CSS-Tabelle
HTML-DOM-Referenz: tableLayout-Eigenschaft