CSS: "border-collapse"

CSS: "border-collapse"

Definition

Status: Aktueller Standard

Das Property "border-collapse" steht für border-collapse (Rahmen kollabieren).

Die CSS-Eigenschaft "border-collapse" legt fest, ob die Rahmen ("border") einer HTML-Tabelle (<table>) und ihrer Zellen als ein gemeinsamer, einzelner Rahmen dargestellt werden oder ob jede Zelle ihren eigenen, separaten Rahmen behält. Gilt ausschließlich für Elemente mit "display": table (meist das <table>-Tag).

Syntax

Selektor {border-collapse: option}

Optionen

separate

Jede Zelle hat eigenen Rahmen (Standard)

collapse

Benachbarte Rahmen werden zu einer einzigen Linie zusammengefasst. Der Abstand (border-spacing) wird ignoriert

inherit

Übernimmt den Wert des Elternelements

Syntax

Selektor {border-collapse: option}

Beispiele

= Tag

= Selektor

= Wert

Wichtig!

= Wichtig!

Beispiel border-collapse : Tabellen-"Border" mit Option "separate" (Standard)""

Der Code:

td, th {border: 1px sold black}

Ergebnis:

Ergebnis: <border-collapse>-Demo 1
Tabellen-"Border" mit Option "separate" (Standard)

Beispiel border-collapse : Tabellen-"Border" mit Option "collapse"""

Der Code:

th, td {border-collapse: collapse}

Ergebnis:

Ergebnis: <border-collapse>-Demo 2
Tabellen-"Border" mit Option "collapse"

Anmerkungen

Wenn zwei Zellen unterschiedliche Rahmenstile haben (z. B. verschiedene Farben oder Dicken) und collapse aktiv ist, entscheidet der Browser nach festen Prioritätsregeln, welcher Rahmen gewinnt (meist der dickere oder auffälligere)

Die Eigenschaft "border-spacing" funktioniert nur, wenn "border-collapse: separate" eingestellt ist. Bei "collapse" verschwindet dieser Zwischenraum komplett

Die Eigenschaft "border-radius" funktioniert bei Tabellen oft nicht zuverlässig, wenn "border-collapse: collapse" verwendet wird; hierfür ist meist "separate" erforderlich.