Den empty-cellsejendom i CSS vælger tomme tabelceller med henblik på at specificere, om ikke at vise grænser og baggrunde på dem. Med andre ord fortæller den browseren, om den skal tegne kanter omkring en tabelcelle eller udfylde baggrunden, når den celle ikke indeholder noget indhold. Det er som at anvende en visibilityejendom på tomme bordceller.
table ( empty-cells: show; )Værdier
Den empty-cellshar to primære værdier:
show: viser en ramme og baggrund på en tom celle.hide: viser ikke en ramme eller baggrund på en tom celle.
Følgende globale værdier accepteres også:
inherit: arver ejendomsværdien af det overordnede element.initial: Brug den definerede standardværdi for ejendommen.unset: nulstiller ejendommen til dens arvede værdi.
Hvornår skal du bruge det
Dette er en interessant egenskab, fordi det giver CSS mulighed for at kontrollere HTML-markeringen for indhold inde i en tabel og reagere i overensstemmelse hermed. Vi betragter normalt ikke CSS som et dynamisk sprog, men dette er et tilfælde, hvor det kommer ret tæt på.
En god brugssag til empty-cellskan være en situation, hvor du måske ikke ved, om en tabel indeholder eller ikke indeholder tomme datapunkter, og du beslutter dig for at skjule dem. Tabeller plejede at være den de facto måde, hvorpå websidelayouter blev konstrueret, så det kunne være et nyttigt værktøj til at vise og skjule elementer, når tabeller bruges til præsentation, eller hvor elementer indeholder display: tableegenskaben.
Demo
Se Pen mPLVzB af CSS-Tricks (@ css-tricks) på CodePen.
Relaterede
displayvisibility:empty
Mere information
- CSS niveau 2 spec
- MDN-reference
- SitePoint-demo på CodePen
- Tabellag og gennemsigtighedsdemo på CodePen
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |