JürgenB: Scrollbare Tabelle

Hallo,

das Thema wurde ja schon einmal hier https://forum.selfhtml.org/self/2018/apr/10/thead-soll-bei-scroll-am-oberen-rand-fixiert-werden/1719031#m1719031 behandelt, und von @Gunnar Bittersmann kam auch ein Lösungsvorschlag basierend auf Sticky.

Das Rahmenproblem habe ich durch die Verwendung von outline und border-spacing lösen können, siehe mein Beispiel.

Leider bleibt aber im Safari der Tabellenkopf nicht wie im FF, Chrome und Edge am oberen Seitenrand kleben, sondern etwa 2em weiter unten, scheint sich wohl am Padding oder Margin der umgebenden Elemente zu orientieren.

Hat jemand eine Idee, woran das liegt, und wie man es behebt?

Gruß
Jürgen

akzeptierte Antworten

  1. @@JürgenB

    Leider bleibt aber im Safari der Tabellenkopf nicht wie im FF, Chrome und Edge am oberen Seitenrand kleben, sondern etwa 2em weiter unten, scheint sich wohl am Padding oder Margin der umgebenden Elemente zu orientieren.

    Wie ich das sehe, ist es die caption, die dem Safari da den Kopf verdreht.

    caption weg und die Kopfzeile ist oben. Ist aber nicht das, was du willst.

    Das im Pen Gesagte „doesn’t work in Edge or Chrome yet, but works for thead th gilt nicht für Safari, thead { position: sticky } funktioniert bestens – auch mit caption.

    Dummerweise immer noch nicht in Chrome; die denken überhaupt nicht daran, den Bug mal zu fixen. Hat man wohl als Platzhirsch nicht nötig. 🤬

    thead, thead th { position: sticky } funktioniert in Firefox und Chrome, macht aber die Sache in Safari noch schlimmer.

    Das schreit nach einer Browserweiche … 😱

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Hallo Gunnar,

      Das schreit nach einer Browserweiche … 😱

      wie macht man das denn am besten?

      Gruß
      Jürgen

      1. @@JürgenB

        Das schreit nach einer Browserweiche … 😱

        wie macht man das denn am besten?

        Am besten gar nicht.

        Was besseres als user agent sniffing fällt mir gerade nicht ein.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. Hallo Gunnar,

          Das schreit nach einer Browserweiche … 😱

          wie macht man das denn am besten?

          Am besten gar nicht.

          Was besseres als user agent sniffing fällt mir gerade nicht ein.

          also eine Javascriptlösung?

          Gruß
          Jürgen

  2. Hallo,

    ich teste jetzt mit Javascript, ob der Browser von Apple kommt, jetzt scheint es zu funktionieren. Danke an Gunnar.

    Gruß
    Jürgen

    1. @@JürgenB

      ich teste jetzt mit Javascript, ob der Browser von Apple kommt

      Ist es nicht sinnvoller zu testen, ob der Browser von Google kommt ein Chromium ist? Chromia sind es ja, die sich fehlerhaft verhalten und deshalb einer Sonderbehandlung bedürfen.

      LLAP 🖖

      --
      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

      —Marc-Uwe Kling
      1. Hallo Gunnar,

        im Google Chrome unter Windows hat's funktioniert.

        Gruß
        Jürgen