empty-cellsNemovitost v CSS vybere prázdných buněk tabulky pro účely stanovení, zda se má zobrazit ohraničení a pozadí na nich. Jinými slovy informuje prohlížeč, zda má nebo nemá kreslit ohraničení kolem buňky tabulky nebo vyplnit pozadí, pokud tato buňka neobsahuje žádný obsah. Je to něco jako použít visibilityvlastnost na prázdné buňky tabulky.
table ( empty-cells: show; )Hodnoty
empty-cellsNemovitost má dvě základní hodnoty:
show: zobrazit ohraničení a pozadí na prázdné buňce.hide: nezobrazí ohraničení ani pozadí prázdné buňky.
Přijímají se také následující globální hodnoty:
inherit: zdědí hodnotu vlastnosti nadřazeného prvku.initial: použít definovanou výchozí hodnotu pro vlastnost.unset: resetuje vlastnost na její zděděnou hodnotu.
Kdy jej použít
Toto je zajímavá vlastnost, protože dává CSS možnost kontrolovat obsah HTML uvnitř tabulky a odpovídajícím způsobem reagovat. Normálně si CSS nemyslíme jako dynamický jazyk, ale toto je příklad, kdy se to docela blíží.
Dobrým případem použití empty-cellsmůže být situace, kdy možná nevíte, zda tabulka bude nebo nebude obsahovat prázdné datové body, a vy se rozhodnete je skrýt. Tabulky bývaly de-facto způsobem, jak byla konstruována rozvržení webových stránek, takže by to mohl být užitečný nástroj pro zobrazení a skrytí prvků, když se pro prezentaci používají tabulky nebo kde prvky obsahují display: tablevlastnost.
Ukázka
Podívejte se na Pen mPLVzB od CSS-Tricks (@ css-tricks) na CodePen.
Příbuzný
displayvisibility:empty
Více informací
- CSS úrovně 2 spec
- Odkaz na MDN
- Ukázka SitePoint na CodePen
- Ukázky vrstev tabulky a průhlednosti na CodePen
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |