Rozložení tabulky - Triky CSS

K table-layoutvlastnictví definuje, co algoritmus prohlížeče by měly používat k rozvržení řádků tabulky, buňky, a sloupce.

table ( table-layout: fixed; )

Jak je vysvětleno ve specifikaci CSS2.1, rozložení tabulky je obecně otázkou vkusu a bude se lišit v závislosti na volbách designu. Prohlížeče však automaticky uplatní určitá omezení, která definují, jak jsou rozloženy tabulky. To se stane, když je table-layoutvlastnost nastavena na auto(výchozí). Tato omezení však lze zrušit, pokud table-layoutje nastavena na fixed.

Hodnoty

auto: výchozí. Automatický algoritmus prohlížeče se používá k definování způsobu rozložení řádků, buněk a sloupců tabulky. Výsledné rozložení tabulky je obecně závislé na obsahu tabulky.
fixed: S touto hodnotou rozložení tabulky ignoruje obsah a místo toho použije šířku tabulky, libovolnou zadanou šířku sloupců a hodnoty ohraničení a mezer mezi buňkami. Použité hodnoty sloupců jsou založeny na šířkách definovaných pro sloupce nebo buňky pro první řádek tabulky.
inherit: označuje, že hodnota je zděděna od table-layouthodnoty jejího rodiče

Aby hodnota fixedměla nějaký účinek, musí být šířka tabulky nastavena na něco jiného než auto(výchozí widthvlastnost). V ukázkách níže jsou všechny šířky tabulky nastaveny na 100%, což předpokládá, že chceme, aby tabulka vodorovně vyplňovala svůj nadřazený kontejner.

Nejlepší způsob, jak vidět účinky algoritmu rozložení pevné tabulky, je použití ukázky.

Podívejte se na ukázku pera pro vlastnost CSS pro rozložení tabulky od Louis Lazaris (@impressivewebs) na CodePen.

Při prvním zobrazení výše uvedené ukázky si všimnete, že rozložení sloupců tabulky je nevyvážené a trapné. V tomto okamžiku tabulka používá výchozí algoritmus prohlížeče k definování způsobu rozložení tabulky, což znamená, že obsah bude určovat rozložení. Demonstrace tuto skutečnost zveličuje vložením dlouhého řetězce textu do jedné buňky tabulky, zatímco všechny ostatní buňky tabulky používají pouze dvě slova. Jak vidíte, prohlížeč rozšíří první sloupec tak, aby pojal větší část obsahu.

Pokud kliknete na tlačítko „Přepnout rozložení tabulky: pevné“, uvidíte, jak vypadá rozložení tabulky, když se použije „pevný“ algoritmus. Když table-layout: fixedje použito, obsah již diktuje rozložení, ale místo toho prohlížeč používá k definování šířek sloupců libovolné definované šířky z prvního řádku tabulky. Pokud na prvním řádku nejsou žádné šířky, jsou šířky sloupců rozděleny rovnoměrně napříč tabulkou, bez ohledu na obsah uvnitř buněk.

K objasnění to mohou pomoci další příklady. V následující ukázce má tabulka prvek, jehož první prvek má šířku 400px. V tomto případě table-layout: fixednemá přepínání žádný účinek.

Podívejte se na ukázku pera pro vlastnost CSS pro rozložení tabulky od Louis Lazaris (@impressivewebs) na CodePen.

Stává se to proto, že výchozí algoritmus rozvržení v podstatě říká „vytvořit první sloupec široký 400 pixelů a distribuovat zbývající sloupce podle jejich obsahu“. Protože ostatní tři sloupce mají stejný obsah jako ostatní, nedojde k žádné změně. Nyní ale přidejme do dalšího sloupce nějaký textový obsah navíc:

Podívejte se na ukázku pera pro vlastnost rozvržení tabulky CSS s šířkou sloupce a variabilním obsahem od Louis Lazaris (@impressivewebs) na CodePen.

Nyní, když kliknete na přepínací tlačítko, uvidíte, jak se sloupce přizpůsobí pevnému rozložení, bez ohledu na obsah. Opět se děje totéž; první sloupec je nastaven na 400 pixelů a zbývající sloupce jsou rozděleny rovnoměrně. Ale tentokrát, protože jeden ze sloupců má další obsah, je rozdíl znatelný.

Jak algoritmus pevného rozvržení určuje šířky sloupců

Následující dvě ukázky by měly pomoci pochopit, že první řádek tabulky pomáhá definovat šířky sloupců tabulky nastavené na table-layout: fixed.

Podívejte se na ukázku pera pro rozvržení tabulky CSS s buňkou v řádku 1, která má definovanou šířku Louis Lazaris (@impressivewebs) na CodePen.

Ve výše uvedeném ukázce má první buňka v prvním řádku tabulky šířku 350 pixelů. Přepnutím se table-layout: fixedupraví ostatní sloupce, ale první zůstane stejný. Nyní vyzkoušejte následující ukázku:

Podívejte se na ukázku pera pro rozložení tabulky CSS s buňkou v řádku 2, která má definovanou šířku Louis Lazaris (@impressivewebs) na CodePen.

V tomto případě je to druhý řádek, který má šířku připojenou k první buňce tabulky. Nyní, když kliknete na přepínací tlačítko, se upraví všechny šířky sloupců. Opět je to proto, že algoritmus pevného rozvržení používá první řádek k určení šířky sloupců a konečným výsledkem je, že šířky rovnoměrně rozděluje.

Výhody algoritmu pevného rozvržení

Estetické výhody používání table-layout: fixedby měly být zřejmé z výše uvedených ukázek. Ale další hlavní výhodou je výkon. Specifikace označuje pevný algoritmus jako „rychlý“ algoritmus, a to z dobrého důvodu. Prohlížeč nemusí před určením velikosti sloupců analyzovat obsah celé tabulky; stačí analyzovat první řádek. Výsledkem je tedy rychlejší zpracování rozložení tabulky.