Table header with `position:sticky` and have horizontal scroll in the table at the same time?

I'm building a table that on mobile, needs to have a sticky header (top of the screen), but also needs to have an scroll on X axis. I can't seem to be able to make both work together. This is the code example of what I'm trying to do: https://jsfiddle.net/xj2fh56r/1/ If you look at the example, the header is currently sticky, but the horizontal scroll is scrolling the entire page rather than just the table body. If we set overflow-x: auto; on the table wrapper, to limit the size of the table to the container width, then we lose the sticky behavior from the header. Does anyone know of a way to make that work? Thanks in advance!
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server