empty-cellsNehnuteľnosť v CSS vyberie prázdnych buniek tabuľky na účely stanovenia, či sa má zobraziť ohraničenie a pozadie na nich. Inými slovami, informuje prehliadač, či má alebo nemá nakresliť ohraničenie okolo bunky tabuľky alebo vyplniť pozadie, ak táto bunka neobsahuje žiadny obsah. Je to niečo ako použitie visibilityvlastnosti na prázdne bunky tabuľky.
table ( empty-cells: show; )Hodnoty
empty-cellsNehnuteľnosť má dve základné hodnoty:
show: zobraziť orámovanie a pozadie na prázdnej bunke.hide: nezobrazuje orámovanie alebo pozadie na prázdnej bunke.
Prijímajú sa aj tieto globálne hodnoty:
inherit: zdedí hodnotu vlastnosti nadradeného prvku.initial: použije pre objekt definovanú predvolenú hodnotu.unset: resetovanie vlastnosti na jej zdedenú hodnotu.
Kedy ho použiť
Toto je zaujímavá vlastnosť, pretože dáva CSS možnosť skontrolovať obsah HTML vo vnútri tabuľky a podľa toho odpovedať. Normálne si CSS nemyslíme ako dynamický jazyk, ale toto je príklad, keď sa to blíži.
Dobrým prípadom použitia empty-cellsmôže byť situácia, keď nebudete vedieť, či tabuľka bude alebo nebude obsahovať prázdne údajové body, a rozhodnete sa ich skryť. Tabuľky boli de facto spôsobom, ako boli konštruované rozloženia webových stránok, takže to mohol byť užitočný nástroj na zobrazovanie a skrývanie prvkov, keď sa na prezentáciu používajú tabuľky alebo keď prvky obsahujú danú display: tablevlastnosť.
Ukážka
Prezrite si pero mPLVzB od CSS-Tricks (@ css-tricks) na CodePen.
Súvisiace
displayvisibility:empty
Viac informácií
- Špecifikácia CSS úrovne 2
- Referencia MDN
- Ukážka SitePoint na CodePen
- Ukážky vrstiev tabuľky a transparentnosti v aplikácii CodePen
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |