Die empty-cellsEigenschaft in CSS wählt leere Tabellenzellen aus, um anzugeben, ob Rahmen und Hintergründe darauf angezeigt werden sollen oder nicht. Mit anderen Worten, es teilt dem Browser mit, ob Rahmen um eine Tabellenzelle gezeichnet oder der Hintergrund ausgefüllt werden soll, wenn diese Zelle keinen Inhalt enthält. Es ist so, als würde man eine visibilityEigenschaft auf leere Tabellenzellen anwenden .
table ( empty-cells: show; )Werte
Die empty-cellsEigenschaft hat zwei Hauptwerte:
show: Zeigt einen Rand und einen Hintergrund in einer leeren Zelle an.hide: zeigt keinen Rand oder Hintergrund in einer leeren Zelle an.
Die folgenden globalen Werte werden ebenfalls akzeptiert:
inherit: erbt den Eigenschaftswert des übergeordneten Elements.initial: Verwenden Sie den definierten Standardwert für die Eigenschaft.unset: Setzen Sie die Eigenschaft auf ihren geerbten Wert zurück.
Wann man es benutzt
Dies ist eine interessante Eigenschaft, da CSS das HTML-Markup auf Inhalt in einer Tabelle überprüfen und entsprechend reagieren kann. Wir denken normalerweise nicht an CSS als dynamische Sprache, aber dies ist ein Fall, in dem es ziemlich nahe kommt.
Ein guter Anwendungsfall empty-cellskönnte eine Situation sein, in der Sie möglicherweise nicht wissen, ob eine Tabelle leere Datenpunkte enthält oder nicht, und Sie entscheiden, diese auszublenden. Tabellen waren früher de facto die Art und Weise, wie Webseitenlayouts erstellt wurden. Sie können daher ein nützliches Werkzeug zum Ein- und Ausblenden von Elementen sein, wenn Tabellen für die Präsentation verwendet werden oder wenn Elemente die display: tableEigenschaft enthalten .
Demo
Siehe den Stift mPLVzB von CSS-Tricks (@ css-Tricks) auf CodePen.
verbunden
displayvisibility:empty
Mehr Informationen
- CSS Level 2 spec
- MDN-Referenz
- SitePoint-Demo auf CodePen
- Tabellenebenen und Transparenzdemo auf CodePen
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |