more CSS <table> tricks 👇 stick the first row using <thead> so you don't lose context, and give it a margin so you don't lose the last row on scroll thead { position: sticky; top: var(--header-height); margin-bottom: 1lh; /* or whatever row height */ }

that margin bottom trick is slick

it's a fun touch so it doesn't get trapped behind especially if you have a set line height for the tr, 1lh does it all 🙌 alternative "hack" is to absolutely position the last row with top: 100% 😈

The headband that wraps around your mattress. No need to tuck sheets under the mattress. Uses any bed sheets.

@rejex_visions fancy tables

Adding mb for the last row is genius! Incidentally, just seperate the last row into its own table maybe? HAHHAHA (what if the height is unknown)

margin bottom is smart

Never thought of that actually! Nice !! Thank you

jus' a little trick so that final row doesn't get lost ✨

What if my rows is not fixed height

What do you think about using CSS grid for tables instead? I've been doing it lately for data grids because it makes all kinds of CSS stuff like sticky headers seem a lot easier to implement (don't need tricks like the extra margin for example). Then add aria labels

loses the semantics unless you add them all back the margin isn't there because it's a <table> fwiw but in any case, unless you really must, the native HTML table is strongly encouraged with the relevant role