tr mit border bottom geht nicht

[Rolf b]

Beim Border-Modell mit separierten Rändern können nur die Table oder die Zellen einen Rand haben. Ränder auf Rows (=tr), Columns(=col), Row-Groups (=tbody) oder Column-Groups (=colgroup) sind nur im Collapse Modell möglich, und geraten dann natürlich prompt in Konflikt miteinander.

Die Spec definiert ausführliche Regeln, wie dieser Konflikt zu beheben ist. Kurz gesagt: bei gleicher Breite haben td-Borders die höchste Priorität, gefolgt von tr und danach tbody. D.h. wenn Du im collapse-Modell dem unteren Rand eines tr-Elements Vorrang geben willst, musst Du ihn breiter machen als den Rand des td.

Bevor Du anfängst, einzelne Rows mit speziellen Klassen zu versehen, um eine Bottom-Border darzustellen, solltest Du überlegen, ob nicht der Einsatz von tbody sinnvoll ist, um damit deine zusammengehörigen Rows zu gruppieren. Es kann beliebig viele tbody-Elemente in einer Table geben, und du kannst dann einen Style setzen wie diesen, um zwischen den Row-Groups jeweils eine Separatorlinie zu ziehen.

tbody:not(:last-of-type) {
   border-bottom: 3px solid red
}

Im separate-Modell kannst Du pfuschen und Separator-Rows einschieben. In die setzt du eine einzige Zelle und verteilst sie mit colspan auf die Tabellenbreite. Diese Zelle bekommt NUR oben oder unten Rand, Höhe 0 und Padding 0. Dazu noch role="separator" ins HTML, weil sie ja keinen Inhalt darstellt, sondern einen logischen Trenner. Das border-spacing oberhalb und unterhalb dieser Separator-Row bleibt erhalten. Du wirst dafür allerdings Kritik sammeln, weil du damit die optische Erscheinung mittels HTML konstruierst, das ist Technik von 1999. Ich wüsste für border-collapse:separate allerdings keine andere Lösung. Warum die Spec in diesem Fall vorgibt, dass der Rand von tr und tbody zu ignorieren ist, verstehe ich nicht so recht; ohne diese Einschränkung gäbe es das Problem nicht.

Du solltest also border-collapse:collapse verwenden. Wenn Du damit einzeln umrandete Zellen darstellen willst, kannst Du Dir behelfen, indem zu jeden Zellinhalt in ein eigenes DIV einrahmst und denen einen Rand gibst. Mit Hilfe von padding auf dem td kannst Du den Randabstand einstellen. Es ist aber wieder mal Styling durch HTML und daher wieder mal missbilligt.

Rolf