Właściwość układu tabeli CSS
Przykład
Ustaw różne algorytmy układu tabeli:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout:
fixed;
width: 180px;
}
Definicja i użycie
Właściwość table-layout
definiuje algorytm używany do rozmieszczania komórek, wierszy i kolumn tabeli.
Wskazówka: główna zaleta układu tabeli: naprawiona; jest to, że tabela renderuje się znacznie szybciej. W przypadku dużych tabel użytkownicy nie zobaczą żadnej części tabeli, dopóki przeglądarka nie wyrenderuje całej tabeli. Tak więc, jeśli użyjesz układu tabeli: naprawiono, użytkownicy będą widzieć górę tabeli, podczas gdy przeglądarka wczytuje i renderuje resztę tabeli. Sprawia to wrażenie, że strona ładuje się dużo szybciej!
Domyślna wartość: | automatyczny |
---|---|
Dziedziczny: | nie |
Animowalny: | nie. Przeczytaj o animacji |
Wersja: | CSS2 |
Składnia JavaScript: | obiekt .style.tableLayout="fixed" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
table-layout | 14.0 | 5.0 | 1.0 | 1.0 | 7.0 |
Składnia CSS
table-layout: auto|fixed|initial|inherit;
Wartości nieruchomości
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 |
Powiązane strony
Samouczek CSS: Tabela CSS
Dokumentacja HTML DOM: właściwość tableLayout