empty-cellsOmaisuus CSS valitsee tyhjän taulukon soluja varten määrittämällä, näytetäänkö rajoja ja taustat niitä. Toisin sanoen se kertoo selaimelle, piirretäänkö reunat taulukon solun ympärille vai täytetäänkö tausta, kun kyseinen solu ei sisällä sisältöä. Se on kuin visibilityomaisuuden soveltaminen tyhjiin taulukon soluihin.
table ( empty-cells: show; )Arvot
empty-cellsOmaisuus on kaksi ensisijaista arvot:
show: näyttää reunuksen ja taustan tyhjässä solussa.hide: ei näytä reunusta tai taustaa tyhjässä solussa.
Myös seuraavat globaalit arvot hyväksytään:
inherit: peri pääelementin ominaisuusarvon.initial: käytä määritettyä oletusarvoa ominaisuudelle.unset: palauta ominaisuus sen perityyn arvoon.
Milloin sitä käytetään
Tämä on mielenkiintoinen ominaisuus, koska se antaa CSS: lle mahdollisuuden tarkistaa taulukon sisällä olevan sisällön HTML-merkinnät ja vastata vastaavasti. Emme yleensä ajattele CSS: ää dynaamisena kielenä, mutta tämä on tapa, jossa se tulee melko lähelle.
Hyvä käyttötapa empty-cellsvoi olla tilanne, jossa et ehkä tiedä, sisältääkö taulukko tyhjiä datapisteitä, ja päätät piilottaa ne. Taulukot olivat aiemmin tosiasiallisesti tapoja rakentaa verkkosivuja, joten se voisi olla hyödyllinen työkalu elementtien näyttämiseen ja piilottamiseen, kun taulukoita käytetään esitykseen tai joissa elementit sisältävät display: tableominaisuuden.
Demo
Katso CSS-Tricksin kynä mPLVzB (@ css-tricks) CodePenistä.
Liittyvät
displayvisibility:empty
Lisää tietoa
- CSS-tason 2 tekniset tiedot
- MDN-viite
- SitePoint-esittely CodePenissä
- Taulukko kerrokset ja läpinäkyvyysdemo CodePenissä
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |