Hacker News Reader

Comment by hyperman1 | Hacker News Reader

I recently wanted a table with a vertical scroll bar. Nothing fancy. If the table reaches some maximum size, a scrollbar should pop up, and only the data should scroll, the header should stay on top.

I've read a lot of stackoverflow, did a lot of arcane css, learned a bunch of display:table obscurities, and still every option broke somewhere, UI wise. Presumably, some magic combination of css incantations should work.

But I can't spend 2+ hours on a table, and even if it seems to work, I can't guarantee it will continue to work or break subtly on some edge case. And this is very basic stuff, UI wise. I've setled for div/class soup, gridlayout, and a few aria selectors.

View on HN

What was wrong with a <table> inside a <div style="max-height: ...; overflow: scroll">?

I've forgotten a lot of the errors so don't quote me on this, but I think the table header scrolls out of screen

That’s when you add position: sticky to the relevant row. Search for “sticky table header” for the proper CSS incantation.

But now what do you do when you want a sticky footer too?

The same trick works for footers, just use bottom:0 instead of top:0

I will have to try this, thank you :)

I tried. I think the scrollbar bled into the header at this point.

Update: I remember now: The rows were drawn on top of the header. Their background must have been transparent or something.

Maybe you could set the Z-index

Unless other items it’s colliding with also have explicit z-index, there’s no need to mess with it, just make sure the background is opaque.

I tried both: added multiple variations of z-index: and background-color:. There must have been something else in there neutering these. I didn't see it in the developer console.

Now you all must be right: This must have been fixable somehow. Now the application contains 10+ years of CSS evolution, maintained by at least 4 predecessors and a bunch of quick and dirty maintenance hacks. It's a huge tower of exceptions built on exceptions . I had already blow way past my time budget for something I had estimated easy, and creating a table wasn't even the core of the job. So I cut my losses.

That’s another source of frustration. God only knows how many hours I’ve spent on individual problems like yours, and what did I learn from diving into the specs and reading every Stackoverflow post on the topic? Nothing. Only how the intricate interactions within CSS eventually allowed me to solve that particular problem, details which I’ve long since forgotten because they’re not relevant anywhere else.

Reply on news.ycombinator.com