A empty-cellsCSS-ben lévő tulajdonság üres tábla cellákat választ ki annak meghatározása céljából, hogy a szegélyeket és háttereket megjelenítsék-e rajtuk. Más szavakkal, megmondja a böngészőnek, hogy rajzoljon-e határokat a táblázat cellája körül, vagy kitöltse a hátteret, ha az a cella nem tartalmaz tartalmat. Ez olyan, mintha egy visibilitytulajdonságot üres tábla cellákra alkalmaznánk.
table ( empty-cells: show; )Értékek
A empty-cellstulajdonságnak két elsődleges értéke van:
show: szegély és háttér megjelenítése egy üres cellában.hide: nem jelenít meg szegélyt vagy hátteret egy üres cellában.
A következő globális értékeket is elfogadjuk:
inherit: örökölje a szülő elem tulajdonságértékét.initial: használja a tulajdonság alapértelmezett értékét.unset: állítsa vissza a tulajdonságot az örökölt értékre.
Mikor kell használni
Ez egy érdekes tulajdonság, mert lehetőséget ad a CSS-nek arra, hogy ellenőrizze a HTML-jelöléseket a táblázat belsejében lévő tartalmakra, és ennek megfelelően reagáljon. Általában nem gondolunk a CSS-re, mint dinamikus nyelvre, de ez egy olyan példa, ahol elég közel jön.
Jó felhasználási eset empty-cellslehet olyan helyzet, amikor nem biztos, hogy tudja, hogy egy táblázat tartalmaz-e üres adatpontokat, és úgy dönt, hogy elrejti azokat. A táblázatok korábban a weboldal elrendezésének tényleges elkészítésén alapultak, így hasznos eszköz lehet az elemek megjelenítésére és elrejtésére, ha táblákat használnak bemutatásra, vagy ha az elemek tartalmazzák a display: tabletulajdonságot.
Demó
Lásd a CSS-Tricks (@ css-tricks) Pen mPLVzB-jét a CodePen-en.
Összefüggő
displayvisibility:empty
Több információ
- CSS 2. szintű specifikáció
- MDN hivatkozás
- SitePoint bemutató a CodePen-en
- Táblázat rétegek és átláthatósági bemutató a CodePen-en
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |