{"id":3140,"date":"2019-11-22T14:12:50","date_gmt":"2019-11-22T14:12:50","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3140"},"modified":"2023-02-12T03:08:08","modified_gmt":"2023-02-12T03:08:08","slug":"css-tutorial-a-table-with-both-a-sticky-header-and-a-sticky-first-column","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-a-table-with-both-a-sticky-header-and-a-sticky-first-column\/","title":{"rendered":"CSS Tutorial – A table with both a sticky header and a sticky first column"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– We\u2019ve covered that\u00a0individual\u00a0<table><\/code>\u00a0cells,\u00a0<th><\/code>\u00a0and\u00a0<td><\/code>\u00a0can be\u00a0position: sticky<\/code>. It\u2019s pretty easy to make the\u00a0header<\/em>\u00a0of a table stick to the top of the screen while scrolling through a bunch or rows (like\u00a0this demo<\/a>).<\/p>\n

But stickiness isn\u2019t just for the top of the screen, you can stick things in any scroll direction (horizontal is\u00a0just as fun<\/a>). In fact, we can have multiple sticky elements stuck in different directions inside the same element, and even single elements that are stuck in multiple directions.<\/p>\n

Why would you do that?\u00a0Specifically for tabular data where cross-referencing is the point.<\/strong>\u00a0In this table (which represents, of course, the scoring baseball game where somehow 20 teams are all playing each other at once because that\u2019s how baseball works), it \u201cmakes sense\u201d that you wouldn\u2019t want the team name or the inning number to scroll away, as you\u2019d lose context of what you\u2019re looking at.
\n