Den empty-cellseiendom i CSS velger tomme tabellceller i den hensikt å spesifisere om du vil vise rammer og bakgrunner på dem. Med andre ord forteller den nettleseren om den skal tegne rammer rundt en tabellcelle eller fylle ut bakgrunnen når den cellen ikke inneholder noe innhold. Det er som å bruke en visibilityeiendom på tomme bordceller.
table ( empty-cells: show; )Verdier
Den empty-cellsEiendommen har to primære verdier:
show: viser en kant og bakgrunn på en tom celle.hide: viser ikke en kant eller bakgrunn på en tom celle.
Følgende globale verdier aksepteres også:
inherit: arver eiendomsverdien til det overordnede elementet.initial: bruk den definerte standardverdien for eiendommen.unset: tilbakestill eiendommen til dens arvede verdi.
Når skal du bruke den
Dette er en interessant egenskap fordi det gir CSS muligheten til å sjekke HTML-merkingen for innhold i en tabell og svare deretter. Vi ser normalt ikke på CSS som et dynamisk språk, men dette er et tilfelle der det kommer ganske nært.
Et godt brukstilfelle for empty-cellskan være en situasjon der du kanskje ikke vet om en tabell inneholder tomme datapunkter eller ikke, og du bestemmer deg for å skjule dem. Tabeller pleide å være den faktiske måten websidelayouter ble konstruert på, så det kan være et nyttig verktøy for å vise og skjule elementer når tabeller brukes til presentasjon eller der elementene inneholder display: tableegenskapen.
Demo
Se pennen mPLVzB av CSS-Tricks (@ css-tricks) på CodePen.
I slekt
displayvisibility:empty
Mer informasjon
- CSS nivå 2 spesifikasjon
- MDN referanse
- SitePoint-demo på CodePen
- Tabellag og gjennomsiktighetsdemo på CodePen
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |