Układ tabeli - CSS-Tricks | Almanach CSS 2025

Do table-layoutdefiniuje własności co algorytm przeglądarkę należy użyć, aby rozłożyć wiersze tabeli, komórek i kolumn.

table ( table-layout: fixed; )

Jak wyjaśniono w specyfikacji CSS2.1, ogólny układ tabeli jest zwykle kwestią gustu i będzie się różnić w zależności od wyborów projektowych. Przeglądarki będą jednak automatycznie stosować pewne ograniczenia, które definiują sposób układania tabel. Dzieje się tak, gdy table-layoutwłaściwość jest ustawiona na auto(wartość domyślna). Ale te ograniczenia można znieść, gdy table-layoutjest ustawione na fixed.

Wartości

auto: domyślny. Automatyczny algorytm przeglądarki służy do definiowania układu wierszy, komórek i kolumn w tabeli. Wynikowy układ tabeli jest ogólnie zależny od zawartości tabeli.
fixed: Przy tej wartości układ tabeli ignoruje zawartość i zamiast tego używa szerokości tabeli, dowolnej określonej szerokości kolumn oraz wartości obramowania i odstępów między komórkami. Używane wartości kolumn są oparte na szerokościach zdefiniowanych w kolumnach lub komórkach dla pierwszego wiersza tabeli.
inherit: wskazuje, że wartość jest dziedziczona z table-layoutwartości swojego rodzica

Aby wartość of fixedmiała jakikolwiek efekt, szerokość tabeli musi być ustawiona na coś innego niż auto(wartość domyślna dla widthwłaściwości). W pokazach poniżej wszystkie szerokości tabeli są ustawione na 100%, co oznacza, że chcemy, aby tabela wypełniała poziomo swój kontener nadrzędny.

Najlepszym sposobem, aby zobaczyć efekty algorytmu o stałym układzie tabeli, jest użycie wersji demonstracyjnej.

Zobacz Demo pióra dla właściwości układu tabeli CSS autorstwa Louisa Lazarisa (@impressivewebs) na CodePen.

Kiedy po raz pierwszy obejrzysz powyższe demo, zauważysz, że układ kolumn tabeli jest niezrównoważony i niezręczny. W tym momencie tabela używa domyślnego algorytmu przeglądarki do zdefiniowania sposobu ułożenia tabeli, co oznacza, że zawartość będzie dyktować układ. Demo wyolbrzymia ten fakt, umieszczając długi ciąg tekstu w jednej komórce tabeli, podczas gdy wszystkie inne komórki tabeli używają tylko dwóch słów. Jak widać, przeglądarka rozszerza pierwszą kolumnę, aby pomieścić większą część treści.

Jeśli klikniesz przycisk „Przełącz układ tabeli: stały”, zobaczysz, jak wygląda układ tabeli, gdy używany jest „stały” algorytm. Po table-layout: fixedzastosowaniu treść nie dyktuje już układu, ale zamiast tego przeglądarka używa dowolnych zdefiniowanych szerokości z pierwszego wiersza tabeli do zdefiniowania szerokości kolumn. Jeśli w pierwszym wierszu nie ma szerokości, szerokości kolumn są równo dzielone w całej tabeli, niezależnie od zawartości komórek.

Dalsze przykłady mogą pomóc w wyjaśnieniu tego. W poniższym demo tabela zawiera element, którego pierwszy element ma szerokość 400px. Zauważ, że w tym przypadku przełączanie table-layout: fixednie ma żadnego efektu.

Zobacz Demo pióra dla właściwości układu tabeli CSS autorstwa Louisa Lazarisa (@impressivewebs) na CodePen.

Dzieje się tak, ponieważ domyślny algorytm układu zasadniczo mówi „zrób pierwszą kolumnę o szerokości 400 pikseli i rozprowadź pozostałe kolumny na podstawie ich zawartości”. Ponieważ pozostałe trzy kolumny mają taką samą zawartość jak inne, nie będzie żadnej zmiany. Ale teraz dodajmy dodatkową zawartość tekstową do jednej z pozostałych kolumn:

Zobacz Demo Pen dla właściwości CSS table-layout z szerokością col i zmienną zawartością autorstwa Louisa Lazarisa (@impressivewebs) w CodePen.

Teraz, jeśli klikniesz przycisk przełącznika, zobaczysz, że kolumny dostosowują się do stałego układu, niezależnie od zawartości. Znowu dzieje się to samo; pierwsza kolumna jest ustawiona na 400 pikseli, a pozostałe kolumny są podzielone równo. Ale tym razem, ponieważ jedna z kolumn ma dodatkową zawartość, różnica jest zauważalna.

Jak algorytm stałego układu określa szerokość kolumn

Poniższe dwie demonstracje powinny pomóc w zrozumieniu, że pierwszy wiersz tabeli pomaga zdefiniować szerokości kolumn tabeli table-layout: fixed.

Zobacz Demo Pen dla układu tabeli CSS z komórką w wierszu 1, której szerokość zdefiniował Louis Lazaris (@impressivewebs) w CodePen.

W powyższym demo pierwsza komórka w pierwszym wierszu tabeli ma szerokość 350 pikseli. Przełączanie table-layout: fixeddostosowuje pozostałe kolumny, ale pierwsza pozostaje taka sama. Teraz wypróbuj następujące demo:

Zobacz Demo Pen dla układu tabeli CSS z komórką w wierszu 2, której szerokość zdefiniował Louis Lazaris (@impressivewebs) w CodePen.

W tym przypadku jest to drugi wiersz, którego szerokość jest dołączona do pierwszej komórki tabeli. Teraz po kliknięciu przycisku przełącznika wszystkie szerokości kolumn są dostosowywane. Dzieje się tak dlatego, że algorytm stałego układu używa pierwszego wiersza do określenia szerokości kolumn, a końcowy rezultat jest taki, że równomiernie rozdziela szerokości.

Zalety stałego algorytmu układu

Z table-layout: fixedpowyższych demonstracji jasno wynikają estetyczne korzyści wynikające z używania . Ale inną ważną korzyścią jest wydajność. Specyfikacja określa stały algorytm jako „szybki” algorytm i nie bez powodu. Przeglądarka nie musi analizować całej zawartości tabeli przed określeniem rozmiaru kolumn; wystarczy przeanalizować pierwszy wiersz. Rezultatem jest więc szybsze przetwarzanie układu tabeli.