Scrollbare Tabelle
JürgenB
- css
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
@@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 🖖
Hallo Gunnar,
Das schreit nach einer Browserweiche … 😱
wie macht man das denn am besten?
Gruß
Jürgen
@@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 🖖
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
Hallo,
ich teste jetzt mit Javascript, ob der Browser von Apple kommt, jetzt scheint es zu funktionieren. Danke an Gunnar.
Gruß
Jürgen
@@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 🖖
Hallo Gunnar,
im Google Chrome unter Windows hat's funktioniert.
Gruß
Jürgen