The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Referenz
  3. empty-cells

CSS 2.1 · Eigenschaft

CSS-Eigenschaft empty-cells

Vollreferenz zu empty-cells: erlaubte Werte, Ausgangswert, Vererbung, Beispiel – und ein Regler, der zeigt, was die Eigenschaft tut.

Erstveröffentlichung Lesezeit 3 min
stylesheet.css · empty-cells
.probe {
  empty-cells: hide;
}
Tabellenüberschrift
EigenschaftWert
margin24px
padding16px
berechneter Wertempty-cells: hide
Box-Breite–
Box-Höhe–

Erläuterungen

links: Wert show, rechts: Wert hide

Diese Eigenschaft ist nur anwendbar auf Tabellenzellen, die nach dem sog. 'Modell der getrennten Rahmen' dargestellt werden. empty-cells kontrolliert darin die Darstellung der Rahmen und Hintergründe um und hinter leeren Tabellenzellen. Dies sind Zellen,

  • die keinen Inhalt (d. h. auch keinen  ) aufweisen, oder
  • deren Eigenschaft visibility auf hidden gesetzt ist, oder
  • deren Inhalt durch den Wert der Eigenschaft display unterdrückt wird.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'empty-cells'
show | hide | inherit
show (Ausgangswert)
Rahmen und Hintergründe um leere Zellen herum werden dargestellt.
hide
Rahmen und Hintergründe um leere Zellen herum werden nicht dargestellt und der Tabellenhintergrund wird sichtbar. Sind alle Zellen einer waagerechten Reihe ohne sichtbaren Inhalt und mit diesem Wert versehen, so wird die gesamte Reihe nicht dargestellt.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

TABLE.angebot { background:#dddddd; empty-cells:show; }

Browserunterstützung

Die Eigenschaft empty-cells wird nicht von allen modernen Browsern unterstützt:

IE 7
IE 7 erfüllt den Wert hidden nur, wenn er für alle Zellen einer Tabellenreihe deklariert ist. Ist das nicht der Fall, missachtet er ihn völlig.
IE/Win 5.x, IE/Win 6
IE/Win 6 erkennt das CSS-Tabellenmodell nur teilweise und deshalb auch nicht die Eigenschaft empty-cells. Leere Zellen werden grundsätzlich ohne Rahmen dargestellt (Abhilfe durch  ), die Eigenschaft empty-cells wird nur dann beachtet, wenn eine ganze Reihe der Tabelle leer ist.
Opera 8
Opera lässt bei der Deklaration des Wertes hide den Hintergrund der Tabellenzelle stehen.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

border-collapse, display, visibility

Was als leer gilt

Die Frage, wann eine Zelle leer ist, beantwortet die Spezifikation enger, als man vermutet. Leer ist eine Zelle ohne jeden Inhalt, und ein Leerzeichen ist bereits Inhalt. Eine Tabelle, deren leere Zellen im Quelltext ein geschütztes Leerzeichen tragen, kennt aus Sicht dieser Eigenschaft keine leeren Zellen.

Das erklärt die verbreitetste Beobachtung: die Angabe wirkt nicht. Ursache ist meist ein Füllzeichen, das jemand eingesetzt hat, weil ältere Browser leere Zellen gar nicht darstellten. Beide Techniken zusammen heben sich auf.

Ebenfalls als leer gilt eine Zelle, deren Inhalt über visibility: hidden unsichtbar gemacht wurde. Die Zelle behält dann ihren Platz, wird aber wie eine leere behandelt.

Was verschwindet und was bleibt

Der Wert hide unterdrückt Rahmen und Hintergrund der leeren Zelle. Ihr Platz bleibt erhalten: die Spalte wird nicht schmaler, die Zeile nicht niedriger, die Nachbarzellen rücken nicht zusammen. Es entsteht eine Lücke im Gitter, kein Wegfall der Zelle.

Ist eine ganze Zeile leer, verhält sich die Zeile so, als wäre display: none gesetzt. Das ist der einzige Fall, in dem die Eigenschaft die Anordnung verändert und nicht nur die Darstellung.

Die Eigenschaft wird vererbt, sodass eine Angabe an der Tabelle oder an einem Element darüber alle Zellen erreicht. Ihr Ausgangswert ist show, und wie border-spacing wirkt sie nur im Modell der getrennten Rahmen.

Der Nutzen liegt vor allem bei Tabellen mit sichtbarem Gitter. Leere Zellen wirken dort wie Löcher, wenn sie einen Rahmen tragen, und wie Lücken, wenn sie keinen tragen. Welche Darstellung die richtige ist, hängt davon ab, ob die leere Zelle einen fehlenden Wert bedeutet oder eine nicht vorgesehene Angabe.

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Das CSS-Tabellenmodell ist für das Medium handheld nicht anwendbar. Die Eigenschaften border-collapse, border-spacing, caption-side und empty-cells sind nicht Teil des Standards 'CSS Mobile'.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert
show
Berechneter Wert
Spezifizierter Wert
Vererbung
Ja
Anwendbarkeit
Auf Tabellen- zellen
%-Bezugswert
Nicht zutreffend
Mediengruppe(n)
Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.