sticky thead verliert border

[Linuchs]

Moin,

alle Tabellenzellen im thead haben einen Rand:

.personen > thead > tr > td {
  text-align: center;
  font-weight: bold;
  border: 1px solid #000;
}

Doch wenn thead sticky definiert wird, verschwindet der (getestet mit FF).

Schließen sich border und sticky aus oder greift eine andere Regel?

Geuß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

alle Tabellenzellen im thead haben einen Rand:

.personen > thead > tr > td {
  text-align: center;
  font-weight: bold;
  border: 1px solid #000;
}

Dein Markup ist nicht richtig. Im Tabellenkopf sind Kopfzellen. (Wer hätte das gedacht?) Kopfzellen sind nicht mit <td>, sondern mit <th> auszuzeichnen.

Doch wenn thead sticky definiert wird, verschwindet der (getestet mit FF).

Dasselbe in Chrome. Blöd, ist aber so.

Das lässt sich mit Pseudoelementen umgehen, die den border-bottom bekommen. Dabei dürfen die Kopfzellen freilich kein padding-inline haben. ☞ Beispiel

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das lässt sich mit Pseudoelementen umgehen, die den border-bottom bekommen. Dabei dürfen die Kopfzellen freilich kein padding-inline haben. ☞ Beispiel

Oh, noch einen derartigen Codepen gefunden. Ach, kuck mal, für wen ich den damals erstellt hatte!

🖖 Живіть довго і процвітайте

[Linuchs]

Kopfzellen sind nicht mit <td>, sondern mit <th> auszuzeichnen.

Das Prinzip ist mir bekannt, ich nehme td, weil text-align der Spalten-Überschrift identisch sein soll wie in den Zeilen. Bei th muss ich das zusätzlich definieren.

Dasselbe in Chrome. Blöd, ist aber so.

Habe im thead th gesetzt, beim FF bleibt der Fehler. Wie ist's beim Chrome?

Dein Beispiel ist leer:

[Gunnar Bittersmann]

@@Linuchs

Kopfzellen sind nicht mit <td>, sondern mit <th> auszuzeichnen.

Das Prinzip ist mir bekannt, ich nehme td, weil text-align der Spalten-Überschrift identisch sein soll wie in den Zeilen.

Das Prinzip von HTML scheint dir noch nicht bekannt zu sein. Du musst HTML-Elementtypen grundsätzlich nach der Art des Inhalts wählen; nicht nach der gewünschten Darstellung.

Wenn Kopfzellen als solche mit <th> ausgezeichnet sind, sollten auch Screenreader-Nutzer eine angemessene Ansage der Tabelle vorgelesen bekommen.

Bei th muss ich das zusätzlich definieren.

Ja, wenn dir die Default-Einstellungen der Browser nicht passen, dann überschreibst du diese in deinem Stylesheet. Dafür ist CSS ja da.

Mir passen bei Tabellen die Default-Einstellungen auch nicht. Deshalb steht im Stylesheet eben sowas wie

table {
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

th, td {
  text-align: start;
  vertical-align: top;
  font-weight: normal;
}

---

Habe im thead th gesetzt

Gut so.

beim FF bleibt der Fehler.

Hatte ich irgendwo gesagt, dass die Auszeichnung als <th> das Problem mit der verschwindenden Linie aus der Welt schafft? Nein, das hatte ich nicht! Hatte ich Pseudoelemente erwähnt? Ja, das hatte ich!

Schau dir bitte die verlinkten Beispiele an. Und nein, sie sind nicht leer.

(Ich habe noch den einen Link korrigiert. Vorher führten beide zum selben Codepen.)

Wie ist's beim Chrome?

Warum fragst du und testest nicht selbst?

🖖 Живіть довго і процвітайте