I’ve been updating my A useless analysis of macOS (OS X) release dates post for nearly 13 years now (OMG). Over the years, the one thing that’s bugged me was that I couldn’t find a good way to have fixed column headings on that post’s incredibly long scrolling table.
Hooray for fixed headers! Read on if you’d like to use this trick yourself…
I did not fix the headers using the relatively-new position: sticky CSS property—that’s probably the right long-term solution, but it still has issues with some browsers, including Chrome, so I’m leaving it be for now.
There are some downsides, which she notes in her post:
- All the problems are in the header styles.
- No right or center aligned headers (unless you do something to set column width and hack the headers).
- No using the column width in the style.
- If text in a header is longer then the content in that column it might look clipped. This is fixed by setting a min-width on the tds or content in that column.
- The height of the table headers has to be a fixed height.
- Horizontal scroll bars or really long non-breaking content breaks it (as well as most other methods of making a fixed-header table).
The only one of these that affected me is that the headers must be left-aligned. I’ve faked them a bit here using spaces, but if you resize the page, you’ll see it doesn’t work well as it scales.
But still, having the header fixed as I scroll is so much more usable than having it vanish that I’m willing to make the “slightly-worse appearance for better functionality” tradeoff.