This content originally appeared on Bram.us and was authored by Bramus!
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 properz-indexhandling so that when it sticks in place, it’ll be on top of what it is supposed to be on top of.
A table with both a sticky header and a sticky first column →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-02-18T21:44:42+00:00) HTML Table with Sticky Header Row and Sticky First Column. Retrieved from https://www.scien.cx/2021/02/18/html-table-with-sticky-header-row-and-sticky-first-column/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.