nicht angemeldet
tr mit border bottom geht nicht
Gunnar Bittersmann
Rolf b
Matthias ApselHallo,
ich habe eine Tabelle will in einer Zeile (tr) eine Unterlinie haben. Wenn ich dem td Unterlinien (border-bottom) zuweise, dann sehen diese gestückelt aus. Bei tr wird border-bottom nicht angezeigt. Warum? Wie mach ich's richtig?
Grüße, Frank
<!DOCTYPE html>
<html>
<head>
<style>
.black_underline { border-bottom: 2px solid black;}
</style>
</head>
<body>
<table>
<tr class="black_underline">
<td>one</td>
<td>two</td>
</tr>
</table>
</body>
</html>
-
@@FrankMe
Wenn ich dem td Unterlinien (border-bottom) zuweise, dann sehen diese gestückelt aus.
Wegen “In this [separated borders] model, each cell has an individual border. The 'border-spacing' property specifies the distance between the borders of adjoining cells.” [CSS22 §17.6.1]
Bei tr wird border-bottom nicht angezeigt. Warum?
Wegen “Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).” [ebenda]
Wie mach ich's richtig?
Mit dem anderen Rahmenmodell mit zusammenfallenden Rahmen. [CSS22 §17.6]
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
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
-
@@Rolf b
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.
Ich würde hier nicht von „Priorität“ oder „Vorrang“ sprechen.
Die Rahmen sind alle da – nur liegen sie übereinander: die von Tabllenzellen liegen ganz vorne (verdecken also andere), die von Tabellenzeilen dahinter, Zeilengruppen noch weiter hinten, Spalten noch weiter, Spaltenguppen noch weiter und ganz unten der Rahmen der ganzen Tabelle. Siehe Grafik in [CSS 2.2 §17.5.1]
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
Ja. Wie bspw. beim Sudoku (drei gleichberechtigte Gruppen von jeweils 3 Zeilen, also 3
tbody-Elemente).Womöglich will FrankMe hier aber die Kopfzeile vom Rest der Tabelle trennen, also
theadundtbodyverwenden.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar Bittersmann,
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Tabellenformatierung/Hintergrund
Bis demnächst
Matthias -
Jau, guter Hinweis mit thead/tbody/tfoot.
Der Begriff "Priorität" ist aber nicht von mir, sondern aus der Spec. Da reden sie von "precedence" und "priority".
Das Layer-Modell hilft hier nur ein bisschen weiter, weil es sich ja primär auf die Hintergründe bezieht und nicht auf die Rahmen. Bei den Rahmen gilt es nur, wenn alle Rahmen gleich breit sind. Es ist nicht so, dass ein 10px Rand eines tbody hinter dem 5px Rand eines td "herausgucken" würde. Er bekommt Vorrang, man sieht dann nur noch den tbody Rand.
guckst du (aber weißt Du bestimmt eh)
Rolf
-
-