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