De empty-cellseigenschap in CSS selecteert lege tabelcellen om aan te geven of er randen en achtergronden op moeten worden weergegeven. Met andere woorden, het vertelt de browser of er randen rond een tabelcel moeten worden getekend of dat de achtergrond moet worden ingevuld als die cel geen inhoud bevat. Het is vergelijkbaar met het toepassen van een visibilityeigenschap op lege tabelcellen.
table ( empty-cells: show; )Waarden
De empty-cellseigenschap heeft twee primaire waarden:
show: toon een rand en achtergrond op een lege cel.hide: geeft geen rand of achtergrond weer op een lege cel.
De volgende globale waarden worden ook geaccepteerd:
inherit: erven de eigenschapswaarde van het bovenliggende element.initial: gebruik de gedefinieerde standaardwaarde voor de eigenschap.unset: reset de eigenschap naar de overgenomen waarde.
Wanneer te gebruiken
Dit is een interessante eigenschap omdat het CSS de mogelijkheid geeft om de HTML-opmaak te controleren op inhoud in een tabel en dienovereenkomstig te reageren. Normaal gesproken beschouwen we CSS niet als een dynamische taal, maar dit is een geval waarin het redelijk dichtbij komt.
Een goede use case voor empty-cellszou een situatie kunnen zijn waarin u misschien niet weet of een tabel al dan niet lege datapunten bevat en u besluit ze te verbergen. Tabellen waren de de-facto manier waarop webpagina-indelingen werden gemaakt, dus het kan een handig hulpmiddel zijn om elementen weer te geven en te verbergen wanneer tabellen worden gebruikt voor presentatie of wanneer elementen de display: tableeigenschap bevatten .
Demo
Zie de Pen mPLVzB door CSS-Tricks (@ css-tricks) op CodePen.
Verwant
displayvisibility:empty
Meer informatie
- CSS Level 2 spec
- MDN-referentie
- SitePoint-demo op CodePen
- Tabellagen en transparantiedemo op CodePen
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |