Hacker News new | ask | show | jobs
by inthewind 4662 days ago
The thing is though. That really the semantic markup is already there in the table. So I don't see why the browser in this case can't just help you out a little. You could click the table, and the whole thing pop out in a 'table viewer'. Or the browser could use a tool tip, and ghost the headers on scroll or something.

If I want a fixed header on a table. Couldn't I just fix the body height on the tbody, and use an overflow: scroll, to achieve the same effect? or am I missing something?

Forgive me as I'm still unsure as to what position:sticky actually means. Is it to keep the headings on screen?

2 comments

Setting an absolute position on the THEAD works (except, I think, in old IE), but only with fixed column widths. The usual hack involves using JavaScript to keep the columns in sync.

The header cells end up being layouted separately from the body cells, and so their widths are not constrained together.

Actually, I'm not sure if sticky positioning is different in this regard... This property might not solve the problem we ran into.

In any case, a sticky header is different from an absolute header, because it doesn't require a separate scrolling container. You just scroll the page, and the header follows along, until the table scrolls out of the viewport.

Would make a nifty niche browser extension I imagine.