table-layout
Wybiera algorytm liczenia szerokości kolumn tabeli: według treści albo stały.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- tabele (display: table)
- JavaScript
element.style.tableLayout = "fixed"
Przykład
#.scores {
width: 100%;
table-layout: fixed;
}
.scores td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<table style="width: 100%; table-layout: fixed; border-collapse: collapse;">
<tr><td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #333; padding: 6px;">Anna Nowak-Wiśniewska</td><td style="border-bottom: 1px solid #333; padding: 6px;">1240</td><td style="border-bottom: 1px solid #333; padding: 6px;">Poziom 7</td></tr>
</table>Definicja i zastosowanie
#Przy domyślnym table-layout: auto przeglądarka czyta całą treść tabeli, zanim wyliczy szerokości kolumn. Kolumny dopasowują się do najdłuższej zawartości, co wygląda naturalnie, ale przy dużych tabelach bywa wolne.
Przy fixed szerokości kolumn ustala pierwszy wiersz (lub elementy <col>) i podana szerokość tabeli. Reszta treści nie wpływa na układ, więc tabela renderuje się szybciej i przewidywalnie.
fixed wymaga ustawionej szerokości tabeli, na przykład width: 100%. Za długa treść komórek może wtedy wystawać, dlatego często łączy się go z overflow-wrap albo obcinaniem tekstu.
Składnia
#table-layout: auto | fixed;Wartości
#Wartości w praktyce
#auto
.demo { table-layout: auto; }fixed
.demo { table-layout: fixed; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Duże tabele z setkami wierszy renderują się wyraźnie szybciej z
table-layout: fixed. - Szerokości kolumn przy
fixedustawisz najwygodniej na elementach<col>lub komórkach pierwszego wiersza.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.