Gunnar Bittersmann: sticky thead verliert border

Beitrag lesen

problematische Seite

@@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

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

--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter