Empty-cells | CSS-Tricks

Die CSS-Eigenschaft empty-cells wählt leere Tabellenzellen aus, um anzugeben, ob Rahmen und Hintergründe auf ihnen angezeigt werden sollen oder nicht. Mit anderen Worten, sie teilt dem Browser mit, ob er Rahmen um eine Tabellenzelle zeichnen oder den Hintergrund füllen soll, wenn diese Zelle keinen Inhalt enthält. Es ist im Grunde wie die Anwendung der visibility-Eigenschaft auf leere Tabellenzellen.

table {
  empty-cells: show;
}

Werte

Die Eigenschaft empty-cells hat zwei Hauptwerte

show: Zeigt einen Rahmen und Hintergrund für eine leere Zelle an.
hide: Zeigt keinen Rahmen oder Hintergrund für eine leere Zelle an.

Die folgenden globalen Werte werden ebenfalls akzeptiert

inherit: Übernimmt den Eigenschaftswert des übergeordneten Elements.
initial: Verwendet den definierten Standardwert für die Eigenschaft.
unset: Setzt die Eigenschaft auf ihren geerbten Wert zurück.

Wann man sie verwendet

Dies ist eine interessante Eigenschaft, da sie CSS die Möglichkeit gibt, die HTML-Struktur auf Inhalte in einer Tabelle zu prüfen und entsprechend zu reagieren. Normalerweise denken wir nicht, dass CSS eine dynamische Sprache ist, aber dies ist ein Beispiel, bei dem sie dem ziemlich nahe kommt.

Ein guter Anwendungsfall für empty-cells könnte eine Situation sein, in der Sie nicht wissen, ob eine Tabelle leere Datenpunkte enthält oder nicht, und Sie entscheiden sich, diese auszublenden. Früher waren Tabellen die Standardmethode für die Erstellung von Webseitenlayouts. Daher könnte dies ein nützliches Werkzeug zum Anzeigen und Ausblenden von Elementen sein, wenn Tabellen für die Präsentation verwendet werden oder wenn Elemente die Eigenschaft display: table enthalten.

Demo

Siehe den Pen mPLVzB von CSS-Tricks (@css-tricks) auf CodePen.

Verwandt

Weitere Informationen

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
1.0	1.2	1.1	4.0	8.0	1.0	3.1