5 ms·

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

chuckadams 2y ago
That’s when you add position: sticky to the relevant row. Search for “sticky table header” for the proper CSS incantation.
- hyperman1 2y ago
  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.
  - bruce343434 2y ago
    Maybe you could set the Z-index
    - chuckadams 2y ago
      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.
      - hyperman1 2y ago
        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.
- TheTxT 2y ago
  But now what do you do when you want a sticky footer too?
  - chuckadams 2y ago
    The same trick works for footers, just use bottom:0 instead of top:0
    - TheTxT 2y ago
      I will have to try this, thank you :)
BostonFern 2y ago
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.

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

hyperman1 2y ago
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.
- bruce343434 2y ago
  Maybe you could set the Z-index
  - chuckadams 2y ago
    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.
    - hyperman1 2y ago
      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.
TheTxT 2y ago
But now what do you do when you want a sticky footer too?
- chuckadams 2y ago
  The same trick works for footers, just use bottom:0 instead of top:0
  - TheTxT 2y ago
    I will have to try this, thank you :)

BostonFern 2y ago

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.