CSS für table: border-collapse

SS border-collapse

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.

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

Abstand zwischen Tabellenzeilen tr und Zellen td

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.
Vergleich: border-collapse: separate vs. border-collapse: 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.

separate collapse Lorem ipsum dolor sit amet,consectetur adipiscing elit.Nam rhoncus semper gravida.Romidus lastat endo clinist. Montag Dienstag Mittwoch 3-8° 6-9° 4-7° starker Wind aus Nordwest schwacher Wind aus westlicher Richtung starker Wind aus Nordwest Höchsttemperaturen Windrichtung