Wow... Okay, so here's something I've been trying to do for at least 10 years! A CSS-only responsive table with fixed column & row headers, inside a layout, with scroll snapping! 🥳 codepen.io/scottjehl/pen/abJ… Works in: Firefox, Safari (iOS & Mac), Chrome (Mobile & Desktop), Edge

3:15 PM · Jun 22, 2021

34
244
31
1,446
thx to @chriscoyier for the recent inspiration to start tinkering with sticky headers again. 🙌
1
0
0
21
Replying to @scottjehl
I needed this today!
0
0
0
2
Doesn't work on the snapping when zoomed in. Gotta make it accessible. :(
1
0
0
1
I'm curious what you mean. Seems to snap as expected when I zoom in. Can you elaborate? Thanks.
1
0
0
1
Replying to @scottjehl @zachleat
Yeah @progressionapp framework page needed this - was an absolute hog to do! Looks like some of the stickiness bugs have been solved in latest chrome though? I built a POC for a no tables version too: codepen.io/jonnyburch/pen/NW…
0
0
0
6
Replying to @scottjehl
Damn! 🥺 I couldn't believe it, had to check the JS tab to be sure. 😭✨
1
0
0
11
Same lol 😂
0
0
0
4
Replying to @scottjehl
Found an odd bug: zoom in, scroll right, then set zoom back to 100%. It's now no longer possible to show the first column – it will always snap back to the second.
4
0
0
3
*On Chrome 91 Desktop
1
0
0
0
Replying to @scottjehl
Nice!
0
0
0
2