@@Gunnar Bittersmann > Funktioniert prächitg: [sticky table head](https://codepen.io/gunnarbittersmann/pen/NYoxqX){:@en} Ähm nein, tut es nicht. Und das [Tutorial](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabelle_mit_festem_Kopf) im Wiki ist genauso fehlerhaft. Hier steckt der Fehler: ```css, bad 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: ```css :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 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter

@@Gunnar Bittersmann > Funktioniert prächitg: [sticky table head](https://codepen.io/gunnarbittersmann/pen/NYoxqX){:@en} Ähm nein, tut es nicht. Und das [Tutorial](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabelle_mit_festem_Kopf) im Wiki ist genauso fehlerhaft. Hier steckt der Fehler: ```css, bad 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: ```css :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 In der Darkmode-Einstellung 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter

@@Gunnar Bittersmann > Funktioniert prächitg: [sticky table head](https://codepen.io/gunnarbittersmann/pen/NYoxqX){:@en} Ähm nein, tut es nicht. Und das [Tutorial](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabelle_mit_festem_Kopf) im Wiki ist genauso fehlerhaft. Hier steckt der Fehler: ```css, bad 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 zur Nutzerpräferenz respektieren: ```css :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 In der Darkmode-Einstellung 🖖 Живіть довго і процвітайте {:@uk} -- *„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“* — @Grantscheam auf Twitter