Den empty-cellsegendom i CSS Väljer tomma tabellceller i syfte att ange om du vill visa gränser och bakgrunder på dem. Med andra ord berättar den för webbläsaren huruvida den ska rita gränser runt en tabellcell eller fylla i bakgrunden när den cellen inte innehåller något innehåll. Det är ungefär som att tillämpa en visibilityegendom på tomma bordsceller.
table ( empty-cells: show; )Värden
Den empty-cellsFastigheten har två primära värden:
show: visa en ram och bakgrund i en tom cell.hide: visar inte en ram eller bakgrund i en tom cell.
Följande globala värden accepteras också:
inherit: ärver egendomens värde för det överordnade elementet.initial: använd det definierade standardvärdet för egenskapen.unset: återställ fastigheten till dess ärvda värde.
När ska du använda den?
Det här är en intressant egenskap eftersom det ger CSS möjlighet att kontrollera HTML-markeringen för innehåll inuti en tabell och svara därefter. Vi tänker normalt inte på CSS som ett dynamiskt språk, men det här är en instans där det kommer ganska nära.
Ett bra användningsfall för empty-cellskan vara en situation där du kanske inte vet om en tabell innehåller eller inte innehåller tomma datapunkter och du väljer att dölja dem. Tidigare användes tabeller som webbsidlayouter konstruerade, så det kan vara ett användbart verktyg för att visa och dölja element när tabeller används för presentation eller där element innehåller display: tableegenskapen.
Demo
Se pennan mPLVzB av CSS-Tricks (@ css-tricks) på CodePen.
Relaterad
displayvisibility:empty
Mer information
- CSS nivå 2 specifikation
- MDN-referens
- SitePoint-demo på CodePen
- Tabellskikt och öppenhetsdemo på CodePen
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8,0 | 1.0 | 3.1 |