position: sticky auf thead und tfoot funktioniert in Chrome, aber nicht in Firefox

[borisbaer]

Hallo zusammen,

ab einem Viewport von 720px und weniger soll das thead- und tfoot-Element meiner Tabelle sticky werden. Während dies in Chrome auch wunderbar funktioniert, tut sich bei Firefox gar nichts. Ich habe ein wenig recherchiert: alte Versionen von FF unterstützen sticky auf table-Elementen scheinbar nicht. Mittlerweile sollte dies aber möglich sein. Was übersehe ich?

Grüße
Boris

[JürgenB]

Hallo,

kennst du https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabelle_mit_festem_Kopf

Gruß
Jürgen

[borisbaer]

Hallo JürgenB,

kennst du https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabelle_mit_festem_Kopf

genauso habe ich es ja gemacht, doch im Firefox funktioniert es nicht.

Grüße
Boris

[JürgenB]

Hallo,

du hast 17 css-Dateien eingebunden, da blicke ich nicht durch. Hast du mal eine Testseite, in der nur die Scroll-Tabelle ist?

Gruß
Jürgen

PS Bei mir funktioniert das Scrollen der Tabelle mit festem Header auch im FF.

[Der Martin]

Hallo,

PS Bei mir funktioniert das Scrollen der Tabelle mit festem Header auch im FF.

bei mir auch, ebenso in seinem Halbbruder Pale Moon, der auf einem etwas älteren Stand ist.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@borisbaer

genauso habe ich es ja gemacht, doch im Firefox funktioniert es nicht.

Dann hast du was falsch gemacht. Funktioniert prächitg: sticky table head

Und das schon seit Urzeiten. Es waren früher Chromia, die da rumzickten.

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

[borisbaer]

Hallo Gunnar (et al.),

Dann hast du was falsch gemacht. Funktioniert prächitg: sticky table head

Und das schon seit Urzeiten. Es waren früher Chromia, die da rumzickten.

ja, ich hatte display: block auf dem thead und tfoot. Das hat position: sticky verhindert. Ich bin nicht darauf gekommen, weil es ja in Chrome ging.

Hat sich also erledigt, danke!

Grüße
Boris

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Funktioniert prächitg: sticky table head

Ähm nein, tut es nicht. Und das Tutorial im Wiki ist genauso fehlerhaft.

Hier steckt der Fehler:

thead {
	position: sticky;
	top: 0;
	background: white;
}

Es ist so gut wie immer falsch, allein Vorder- bzw. Hintergrundfarbe zu setzen. Das kann zur ostfriesischen Nationalflagge (weißer Adler auf weißem Grund)^[1] führen (“hello dark mode, my old friend”)^[2].

Immer[tm] Vorder- und Hintergrundfarbe setzen, also noch color: black dazu.

Noch besser: auch im Tabellenkopf die Nutzerpräferenz respektieren:

:root {
  --background-color: white;
  --color: black;
  background-color: var(--background-color);
  color: var(--color);
}

@media (prefers-color-scheme: dark) {
  --background-color: black;
  --color: white;
}

thead {
  position: sticky;
  top: 0;
  background: var(--background-color);
}

In dem Fall kann thead color von :root erben. Schadet aber auch nicht, da nochmals color: var(--color) anzugeben.

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

---

1. Otto ↩︎

2. frei nach Paul Simon ↩︎

[JürgenB]

Hallo Gunnar,

ich habe nur die Farbangabe ergänzt, um das Tutorial nicht zu überladen.

Gruß
Jürgen