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

problematische Seite

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

akzeptierte Antworten

  1. problematische Seite

    1. problematische Seite

      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

      1. problematische Seite

        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.

        1. problematische Seite

          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

          --
          Wie man sich bettet, so schallt es heraus.
      2. problematische Seite

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

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

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

          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

        2. problematische Seite

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

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

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

          1. Otto ↩︎

          2. frei nach Paul Simon ↩︎

          1. problematische Seite

            Hallo Gunnar,

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

            Gruß
            Jürgen