CSS für Tabellen – table: border-collapse

Abstand zwischen Tabellenzeilen tr und Zellen td

Per Voreinstellung haben Tabellen, Tabellenzeilen und Tabellenzellen keine Rahmen, aber der Rand oder Rahmen von Tabellenzellen – stellt den tabellarischen Charakter der Daten stärker heraus. Wenn für Tabellenzellen ein Rahmen mit dem CSS-Stil border definiert ist, hat jede Zelle ihren separaten Rahmen. Nebeneinander liegende Zellen sind durch zwei Rahmen voneinander getrennt.

table {
   border: 1px solid silver; 
}

Wenn Tabellenzellen mit einem Rahmen (border) gerendert werden, entsteht automatisch ein doppelter Rahmen durch nebeneinander liegende Zellen und den aufeinander folgenden Zeilen der Tabelle. Hat die Tabelle eine Hintergrundfarbe (background-color), scheint die Farbe im freien Raum zwischen den Tabellenzellen durch.

border-collapse: separate oder collapse?

border-collapse steuert das Verhalten der Tabellenrahmen (in <table>-, <td>-, <th>-Elementen) und kann einen von zwei Werten annehmen:

• separate (Standard) Alle Zellen haben eigene Ränder, mit einem Abstand zwischen den einzelnen Zellen.
• collapse Die Ränder der angrenzenden Zellen werden lückenlos zusammengeführt.

CSS table border-collapse fügt die nebeneinander liegenden Rahmen zu einem Rahmenstrich zusammen. Eine evtl. Hintergrundfarbe der Tabelle wird nicht sichtbar.

table {
   border-collapse: collapse; 
}

Erblich: Ja

border-collapse

collapse | separate

collapse

Im collapse-Modell hat die Tabelle einen äußeren Rand. Benachbarte Zellen teilen sich die internen Rahmen.

separate

Im separate-Modell hat die Tabelle einen separaten äußeren Rahmen und jede Zelle besitzt einen eigenen separaten Rahmen. Der äußere Rahmen der Tabelle berührt die einzelnen Zellenrahmen nicht. separate ist die Voreinstellung.

border-collapse wird immer für die gesamte Tabelle festgelegt. Es gibt keine direkte Möglichkeit, die Rahmen einzelner Tabellenzellen festzulegen.

table.rahmen {
   border-collapse: collapse;
   border: 1px solid silver;
}
table.rahmen td {
   border: 1px solid silver;
}
table.rahmen th {
   border: 1px solid silver;
}

border-collapse ist ein einfacher Schalter und bestimmt nur, ob ein Raum zwischen benachbarten Zellen entsteht oder nicht. Soll der Zwischenraum explizit bestimmt werden, kommt border-spacing zum Einsatz, um den Abstand zwischen Tabllenzellen td und -reihen (tr) festzulegen.

empty-cells: Anzeige leerer Tabellenzellen

CSS empty-cells legt fest, ob eine Hintergrundfarbe und Rahmen von leeren Tabellenzellen gezeigt werden (eine leere Zelle hat keinen sichtbaren Inhalt). Die Eigenschaft wird nur beim separate-Modell angewendet.

table.ein {
	empty-cells: hide;
	border-spacing: 0;
}

empty-cells: hide zeigt die Zelle als leere Zelle ohne sichtbaren Inhalt. Auch Carriage Return, Line Feed, Tab und Leerzeichen sind kein sichtbarer Inhalt. Ein erzwungener Leerraum (&nbsp;) allerdings gilt als sichtbarer Inhalt.

Wenn das separate-Modell unterstützt wird, muss sich hinter leeren Tabellenzellen und im border-spacing die Hintergrundfarbe der Tabelle zeigen. empty-cells: hide wird von allen Browsern unterstützt.

CSS empty-cells

Erblich: Ja

empty-cells

hide | show | inherit

hide

weist den Browser an, keinen Rahmen um leere Zellen darzustellen.

show

ist die Voreinstellung und weist den Browser an, einen Rahmen um leere Zellen darzustellen.

Im sep>arate-Modell hat jede Tabellenzelle einen Rahmen, und die Zellen sind durch einen kleinen Abstand voneinander getrennt. Wir bevorzugen heute meist border-collapse für Tabellen, wo die Rahmen der Zellen zusammenfallen. Wird also border-collapse: collapse für die Tabelle festgelegt, hat empty-cells keine Wirkung.