CSS für Tabellen – table: border-collapse

CSS border-collapse

border-collapse bestimmt, ob die Rahmen benachbarter Tabellenzellen zusammnenfallen oder ob jede Tabllenzelle einen eigenen Rahmen hat.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Abstand zwischen Tabellenzeilen tr und Zellen td

Per Voreinstellung haben Tabellen, Tabellenzeilen und Tabellenzellen keine Rahmen. Rahmen bzw. CSS border stellen 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.

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; 
}

border-collapse

Erblich: Ja

border-collapse
collapse | separate
collapse
Im collapse-Modell hat die Tabelle einen äußeren Rand und 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. Mit CSS2.1 wurde separate zur Voreinstellung.
Table border separate vs collapse
Vergleich: border-collapse: separate vs. border-collapse: collapse
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 Abstand zwischen den Zellen explizit bestimmt werden, kommt border-spacing zum Einsatz, um den Abstand zwischen Tabllenzellen td und -reihen (tr) festzulegen.