Rozloženie tabuľky - Triky CSS

K table-layoutvlastníctva definuje, čo algoritmus prehliadača by mali používať na rozvrhnutie riadkov tabuľky, bunky, a stĺpce.

table ( table-layout: fixed; )

Ako je vysvetlené v špecifikácii CSS2.1, rozloženie tabuľky je zvyčajne vecou vkusu a bude sa líšiť v závislosti od možností návrhu. Prehliadače však automaticky uplatnia určité obmedzenia, ktoré určia, ako sú rozložené tabuľky. Stane sa to, keď je table-layoutvlastnosť nastavená na auto(predvolené). Tieto obmedzenia sa však dajú zrušiť, keď table-layoutsa nastaví na fixed.

Hodnoty

auto: predvolená hodnota. Automatický algoritmus prehľadávača sa používa na definovanie rozloženia riadkov, buniek a stĺpcov tabuľky. Výsledné rozloženie tabuľky je všeobecne závislé od obsahu tabuľky.
fixed: S touto hodnotou rozloženie tabuľky ignoruje obsah a namiesto toho použije šírku tabuľky, ľubovoľnú zadanú šírku stĺpcov a hodnoty orámovania a medzery medzi bunkami. Použité hodnoty stĺpcov sú založené na šírkach definovaných pre stĺpce alebo bunky pre prvý riadok tabuľky.
inherit: označuje, že hodnota sa dedí z table-layouthodnoty jej rodiča

Aby mala hodnota fixednejaký efekt, musí byť šírka tabuľky nastavená na niečo iné ako auto(predvolená hodnota pre widthvlastnosť). V ukážkach nižšie sú všetky šírky tabuľky nastavené na 100%, čo predpokladá, že chceme, aby tabuľka naplnila svoj nadradený kontajner vodorovne.

Účinky algoritmu pevného rozloženia tabuľky najlepšie uvidíte pomocou ukážky.

Pozrite si ukážku pera pre vlastnosť rozloženia tabuľky CSS od Louisa Lazarisa (@impressivewebs) na CodePen.

Pri prvom zobrazení ukážky vyššie si všimnete, že rozloženie stĺpcov tabuľky je nevyvážené a nepríjemné. V tom okamihu tabuľka používa predvolený algoritmus prehľadávača na definovanie spôsobu rozloženia tabuľky, čo znamená, že obsah bude určovať rozloženie. Ukážka túto skutočnosť zveličuje, keď do jednej bunky tabuľky zahrnula dlhý reťazec textu, zatiaľ čo všetky ostatné bunky tabuľky používajú iba dve slová. Ako vidíte, prehliadač rozšíri prvý stĺpec tak, aby sa do neho zmestil väčší obsah.

Ak kliknete na tlačidlo „Prepnúť rozloženie tabuľky: pevné“, uvidíte, ako vyzerá rozloženie tabuľky, keď sa použije algoritmus „pevné“. Keď table-layout: fixedsa použije, obsah už nediktuje rozloženie, ale prehliadač namiesto toho použije na definovanie šírky stĺpcov ľubovoľné definované šírky od prvého riadku tabuľky. Ak v prvom riadku nie sú k dispozícii žiadne šírky, šírky stĺpcov sa rozdelia rovnomerne po celej tabuľke bez ohľadu na obsah vo vnútri buniek.

Toto môžu objasniť ďalšie príklady. V nasledujúcej ukážke má tabuľka prvok, ktorého prvý prvok má šírku 400px. Upozorňujeme, že v tomto prípade table-layout: fixednemá prepínanie žiadny účinok.

Pozrite si ukážku pera pre vlastnosť rozloženia tabuľky CSS od Louisa Lazarisa (@impressivewebs) na CodePen.

Stáva sa to preto, lebo predvolený algoritmus rozloženia v podstate hovorí „urobte prvý stĺpec široký 400 pixlov a distribuujte zvyšné stĺpce na základe ich obsahu“. Pretože ďalšie tri stĺpce majú navzájom rovnaký obsah, nedôjde k nijakej zmene. Teraz však do niektorého z ďalších stĺpcov pridajme ďalší textový obsah:

Pozrite si ukážku pera pre vlastnosť rozloženia tabuľky CSS so šírkou stĺpca a variabilným obsahom od Louisa Lazarisa (@impressivewebs) na CodePen.

Ak teraz kliknete na prepínač, uvidíte, ako sa stĺpce prispôsobia pevnému rozloženiu bez ohľadu na obsah. Opäť sa deje to isté; prvý stĺpec je nastavený na 400 pixlov, potom sú zvyšné stĺpce rozdelené rovnakým spôsobom. Tentokrát je ale rozdiel viditeľný, pretože jeden zo stĺpcov má ďalší obsah.

Ako pevné algoritmus rozloženia určuje šírky stĺpcov

Nasledujúce dve ukážky by mali pomôcť pochopiť, že prvý riadok tabuľky pomáha definovať šírky stĺpcov tabuľky nastavenej na table-layout: fixed.

Pozrite si ukážku pera pre rozloženie tabuľky CSS s bunkou v riadku 1, ktorá má definovanú šírku Louis Lazaris (@impressivewebs) na CodePen.

V ukážke vyššie má prvá bunka v prvom riadku tabuľky šírku 350 pixelov. Prepínaním sa upravia table-layout: fixedďalšie stĺpce, ale prvý zostáva rovnaký. Teraz vyskúšajte nasledujúcu ukážku:

Pozrite si ukážku pera pre rozloženie tabuľky CSS s bunkou v riadku 2, ktorá má definovanú šírku Louis Lazaris (@impressivewebs) na CodePen.

V tomto prípade je to druhý riadok, ktorý má šírku pripojenú k svojej prvej bunke tabuľky. Teraz, keď kliknete na prepínač, upravia sa všetky šírky stĺpcov. Opäť je to preto, že algoritmus pevného usporiadania používa prvý riadok na určenie šírky stĺpca a konečným výsledkom je, že šírky rozdelí rovnako.

Výhody algoritmu pevného usporiadania

Estetické výhody používania table-layout: fixedby mali byť zrejmé z vyššie uvedených ukážok. Ale ďalšou hlavnou výhodou je výkon. Špecifikácia označuje pevný algoritmus ako „rýchly“ algoritmus, a to z dobrého dôvodu. Prehliadač nemusí pred určením veľkosti stĺpcov analyzovať obsah celej tabuľky; stačí analyzovať prvý riadok. Výsledkom je teda rýchlejšie spracovanie rozloženia tabuľky.