Klebriger Mist (position: sticky)

[Rolf B]

Hallo alle,

ich hatte die Absicht, eine etwas breitere Tabelle mit einer klebrigen ersten Spalte zu versehen. Aus den gleichen Gründen, weshalb andere eine klebrige erste Zeile machen.

Nach etlichem Ringen habe ich das in ein Wiki-Beispiel gepackt:

Sticky First Column

Beim Start zeigt das Beispiel die triviale Lösung: die Zellen haben einen Rand, border-collapse ist auf collapse und das Zellpadding ist brav in em angegeben.

Aber das Ding hat seine Tücken.

(1) Generell ergibt sich der Mist, dass der linke und rechte Rand der Datumsspalte nicht sticky sind, sondern mit dem Rest nach links verschwinden. Bäh. Und links guckt dann auch noch der gescrollte Teil der Tabelle durch. BÄH.

(2) Chromia auf low-dpi Bildschirmen

Scrollt man das Beispiel in Chrome nach rechts (Fenster muss dafür schmal genug sein), ergeben sich in der sticky-Spalte visuelle Artefakte in Form von Pixel-Lücken zwischen den Datumszellen, wo der Datenteil der Tabelle durchguckt. Aber nur in Chrome, Edge kriegt es hin. Faszinierend. Firefox kann es auch vernünftig.

(3) Chrome für Android

Da scrollt einfach der ganze Body und von sticky ist keine Spur. Dabei hab ich doch das Viewport-Meta gesetzt. WTF?!

Das Problem mit dem linken Rand habe ich zu durch andere Ränder zu lösen versucht. Man stelle auf der Demo-Seite border-collapse auf separate und cell borders auf 50/50 (was es nicht mehr ist, ich habe es zu 75/25 ändern müssen). Dann bleibt der linke Rand stehen (er ist jetzt Teil der th in Spalte 1 und nicht mehr der table zugehörig).

Aber visuelle Artefakte in Chrome gibt's immer noch. Die verschwinden erst, wenn ich das Padding nicht in em, sondern px angebe. Das Bescheuerte ist, dass das nur in Chrome passiert. Edge und Firefox kriegen es ordentlich hin. Aber Chrome rechnet offenbar zu ungenau bzw. rundet die Positionen der sticky-Zellen anders als die Zellen in der Table.

Aber auf meinem Handy klebt immer noch nichts. Ist das mein Handy? Oder mach ich da generell noch was falsch?

Rolf