5 ms·
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 shou
by hyperman1 2y ago
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.
- bruce343434 2y agoWhat was wrong with a <table> inside a <div style="max-height: ...; overflow: scroll">?
- hyperman1 2y agoI've forgotten a lot of the errors so don't quote me on this, but I think the table header scrolls out of screen
- chuckadams 2y agoThat’s when you add position: sticky to the relevant row. Search for “sticky table header” for the proper CSS incantation.
- hyperman1 2y agoI 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.
- bruce343434 2y agoMaybe you could set the Z-index
- chuckadams 2y agoUnless 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.
- hyperman1 2y agoI 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.
- TheTxT 2y agoBut now what do you do when you want a sticky footer too?
- chuckadams 2y agoThe same trick works for footers, just use bottom:0 instead of top:0
- TheTxT 2y agoI will have to try this, thank you :)
- BostonFern 2y agoThat’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.