HTML Table with Sticky Header Row and Sticky First Column
Nice work by Chris Coyier:
See the Pen Table with Sticky Header and Sticky First Column by Chris Coyier (@chriscoyier) on CodePen.
I tried this on a table before and would swear it didn’t work back then. Perhaps I did something wrong, because it’s quite tricky as Chris details:
The “trick” at play here is partially the
position: sticky;usage, but moreso to me, how you have to handle overlapping elements. A table cell that is sticky needs to have a background, because otherwise we’ll see overlapping content. It also needs proper
z-indexhandling so that when it sticks in place, it’ll be on top of what it is supposed to be on top of.