CSS 2.1: `border-collapse`

Erläuterungen

Das CSS-Tabellenmodell (CSS Table Model) beschreibt die Darstellung der Rahmen von Elementen innerhalb einer Tabelle. Der Grundgedanke hierbei ist folgender. Innerhalb einer Tabelle kann eine Vielzahl von unterschiedlichen Elementen auftreten: Zellen, Spalten, Reihen, Gruppen von Spalten (column group) oder Gruppen von Reihen (row group). Deklariert man nun die Rahmeneigenschaften für einige oder alle dieser Elemente, ist die Wahrscheinlichkeit groß, dass an einigen Stellen der Tabelle mehrere der deklarierten Eigenschaften zusammentreffen.

Um diese Widersprüche zu bereinigen, wurden zwei Darstellungsmodelle entwickelt, das Modell der zusammenfallenden Rahmen und das Modell der getrennten Rahmen. Im Modell der zusammenfallenden Rahmen fallen die Rahmen benachbarter Elemente innerhalb der Tabelle zu einem Rahmen zusammen, im Modell der getrennten Rahmen werden sie räumlich getrennt voneinander gezeichnet.

Der Wert der Eigenschaft border-collapse bestimmt, welches Modell angewendet wird, d. h. ob die Rahmen der Elemente innerhalb der Tabelle zusammenfallen oder getrennt gezeichnet werden. Vom Wert dieser Eigenschaft hängt es auch ab, ob die Rahmeneigenschaften (Breite, Farbe und Muster) von Elementen innerhalb der Tabelle deklarierbar sind und wie sie dargestellt werden. In beiden Fällen sind anders geartete Konflikte zu lösen, die durch das Modell der zusammenfallenden Rahmen bzw. durch das Modell der getrennten Rahmen beschrieben werden.

Erlaubte Werte

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

'border-collapse' collapse | separate | inherit

collapse (Modell der zusammenfallenden Rahmen)

Die Rahmen der benachbarten Elemente fallen zusammen zu einem Rahmen und werden auf die gedachte Gitterlinie zwischen den Zellen zentriert.

Zur Konfliktlösung für den Fall, dass für einen Teil des Rahmens unterschiedliche Regeln existieren, gelten folgende Prioritäten:

Höchste Priorität erhält die Angabe border-style:hidden. Ist border-style:hidden nur einem Element zugewiesen, wird der entsprechende Rahmen oder Rahmenteil nicht dargestellt.
Niedrigste Priorität erhält die Angabe border-style:none. Nur wenn für alle relevanten Elemente border-style:none vorgegeben ist, wird der Rahmen an dieser Stelle unterdrückt. Nichtsdestotrotz bleibt none der Ausgangswert für border-style.
Breitere Rahmenstärken werden vor schmaleren bevorzugt, wenn border-style:hidden nicht und border-style:none nicht in allen Regeln auftritt.
Ist darüber hinaus für mehrere Elemente dieselbe Rahmenstärke gegeben, wird in folgender Reihenfolge nach dem Rahmenmuster gewichtet: double, solid, dashed, dotted, ridge, outset, groove, inset.
Unterscheiden sich die Rahmenangaben nur in der Farbe, dann wird nach dem Element gewichtet, zu dem der Rahmen gehört, in dieser Reihenfolge:
1. Zellen: th, th
2. Reihen: tr
3. Reihengruppen: thead, tfoot, tbody
4. Spalten: col
5. Spaltengruppen: colgroup
6. Tabelle: table
Sind zwei benachbarte Elemente mit unterschiedlicher Rahmenfarbe gleichrangig, z. B. zwei Tabellenzellen, ist es undefiniert, welches Element mit seinem Rahmen den Rahmen des anderen überdeckt.

Die tatsächliche Breite einer Tabelle lässt sich dann als die Summe aus den Breiten der einzelnen Spalten, den paddings aller Spalten, den innenliegenden Rahmenstärken und der Hälfte der Strichstärke der beiden außenliegenden Rahmen berechnen. Die äußere Hälfte der Außenrahmen fällt in die margin-Fläche der Tabelle.

Eine Tabelle kann kein padding haben.

separate (Modell der getrennten Rahmen) (Ausgangswert)

Die Rahmen zweier benachbarter Zellen werden getrennt voneinander dargestellt. In diesem Fall können Eigenschaften nur für die Rahmen einzelner Zellen oder für den Außenrahmen der gesamten Tabelle festgelegt werden, nicht jedoch für Reihen, Spalten oder Gruppen von Reihen oder von Spalten.

Die Breite der Abstände zwischen den Zellen ist vom Wert der Eigenschaft border-spacing abhängig. Für die Hintergrundgestaltung der Zwischenräume sind die der Tabelle zugeordneten Eigenschaften maßgeblich. Leere Zellen werden in Abhängigkeit von der Eigenschaft empty-cells dargestellt.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

Die folgenden Beispiele zeigen die korrekte Darstellung von border-collapse anhand zweier Screenshots derselben Tabelle. In jeder Zelle sind die für die Deklaration des Rahmens verwendeten Werte angegeben.

Im ersten Beispiel für das Separated Border Model fällt auf, dass die Abstände zwischen den Zellen immer gleich sind. Breitere Rahmen werden nach innen ausgedehnt.

TABLE { border-collapse: separate; border: 2px solid #6699ee; border-style: outset; }

Das zweite Beispiel zeigt dieselbe Tabelle, dargestellt für das Collapsing Border Model. Hier kann man gut erkennen, wie verschieden breite Rahmen mittig übereinander stehen. Dargestellt ist jeweils der Rahmen mit der höheren Priorität. Auffällig ist, dass der Rahmen der Zelle B-3 auf Grund seiner niedrigen Priorität an keiner Stelle gezeigt wird.

TABLE { border-collapse: collapse; border: 2px solid #6699ee; border-style: outset; }

Browserunterstützung

Die Eigenschaft border-collapse wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.0: IE/Win erkennt das CSS-Tabellenmodell nur teilweise und unterscheidet deshalb erst seit Version 5.5 zwischen zusammenfallenden und getrennten Rahmen an Tabellenzellen. Die Darstellung der Rahmen hängt davon ab, ob die Zellen gefüllt sind oder nicht.
IE 7: IE 7 unterscheidet zwischen den Werten collapse und separate, hält sich aber bei zusammen fallenden Rahmen nicht an die geforderten Prioritäten.
IE/Mac 5.x: Beim IE/Mac ist die Darstellung von Rahmen an Tabellenzellen ebenfalls davon abhängig, ob die Zellen leer oder gefüllt sind.
Opera 9: Opera kann geringe Schwierigkeiten mit der korrekten Darstellung dieser Eigenschaft haben, die auch vom Kontext im Webdokument und von anderen Eigenschaften desselben Elements herrühren können.

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-spacing, empty-cells

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'.