PHPnews.io

HTML Table with Sticky Header Row and Sticky First Column

Written by Bram.us / Original link on Feb. 18, 2021

Nice work by Chris Coyier:

https://www.bram.us/wordpress/wp-content/uploads/2021/02/table-sticky-header-row-sticky-first-column.mp4

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-index handling 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 →

bram tutorialzine link html sticky table bram

« SmolCSS – Minimal snippets for modern CSS layouts and components - Pure CSS Stopwatch ⏱️ »