Please make your table headings sticky

Some of us would rather say "please don't": https://news.ycombinator.com/item?id=32998091

I wish table headers did this automatically. If devs do the extra work to use <th> tags then this is likely the behavior they already want.

I'll give you sticky headers on one axis, but am still waiting for the day that CSS supports them on both axes: https://github.com/w3c/csswg-drafts/issues/8286

Instead of sticky headers, I would suggest using a limited viewport height, so that the headers always remain visible.

Like in DataGridXL (https://datagridxl.com) disclaimer: I am the creator

... videos, not inline examples?

You would think it's that easy to make the table heading sticky with just one `position: sticky;`, until you decide to do anything with the table content.

I have a table with sticky head. Then I decide to add a memory feature, where if user scrolls the table body, and leaves the page, I'd save the index of the first visible row, and restore the scroll position when user comes back. I noticed that every time the restored position is always about one row too downward. For instance, when I want to restore to row 5, it restores to row 6 plus a few pixels. Turns out, once I turned the thead semi-transparent, I can see row 5 was indeed at the top of the table, but the thead just overlaps on top and making it look like row 6 is the first visible row.

I told myself, no problem, I just modify the scroll position to be aware of the thead's height. It worked fine at first, but from time to from it'd still be off a few pixels. Turns out, because the table is huge, I'm doing lazy loading upon the scroll event. And because I'm using the default automatic table layout (instead of the fixed layout), sometimes certain head cell becomes too narrow and word wraps, thus increases the whole head's height. The final solution is to create a ResizeObserver[1] on the thead element and dynamically adjust the scroll position if its height changes.

[1] https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser...

There's nothing in the spec that says table headings disappear from view when you page down. This is a problem with your WWW reader. Nothing about this requires authors/publishers to be in the loop on this, each applying their own one-off hacky attempt to "fix" this. They really shouldn't be.

And at the command line: headers to stderr, body to stdout.

Without it you get this behavior:

  > heights | sort -k2 -nr
  George  186
  Wally   173
  NAME    HEIGHT

  > heights | sort -k2 -nr
  NAME    HEIGHT
  George  186
  Wally   173

This didn't work for a long time. Chrome previously disabled position sticky on thead and tr elements: https://issues.chromium.org/issues/41303743

I remember the browser support matrix showed almost all green when it didn't work for tables in Chrome.

Looking at you, Confluence.

confession: I somehow make just functional web apps with near zero CSS knowledge. I recently tried to make the header sticky on this ~20k row monstrosity: https://www.datasciencemeta.com/rpackages

My first port of call was bootstrap table classes (hoping for a class="table table-header-sticky") but there's nothing of the sort. I fiddled with suggestions from stack overflow, GPT and codepen in ~20 minutes only got sticky headers working with weird side effects on the rest of the table.

But in 2 minutes with the codepen from this article, I have it working. Pushing to prod now. Thank you!

In case you're one of the people implementing this and want your header's borders to also stick, you can do something like this

    table thead:before {
      content: '';
      position: absolute;
      width: 100%;
      top: 0;
      border-top: 2px solid;
    }

    table thead:after {
      content: '';
      position: absolute;
      width: 100%;
      bottom: 0;
      border-bottom: 1px solid;
    }

Make a browser extension that stickys all table headings :p

I had a fun time generalizing sticky headings so they work for forms and nested tables: https://vimeo.com/566181649 . Though that was in a Java app.

There are nice little headings in the video. But sometimes there are larger (multi-line, with paddings) headings, or simply broken ones (e.g., custom fonts with icons that don't load), and such headings are more annoying than useful to have sticky. Especially with pages that also show their headers and footers at all times, leaving little space for the content. Which makes it one of those features that should be used with care (while it is occasionally useful, and so is raising awareness about it).

the CodePen looks better if top is set to offset the border (i.e. -1px instead of 0). It avoids the table body from bleeding above the header.

Compare: https://codepen.io/bradleytaunt/pen/bGZyJBj

With: https://codepen.io/alokmenghrajani/pen/ExMBQow

No, don't. The kewl design crowd will insist that the tables and rows be borderless and that the scroll bars disappear. You won't be able to see if the top rows of the table are showing.