Skip to content

How to add fixed headers to a variable-width table

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.

I'd search occasionally, and find various solutions—some using two tables, some using JavaScript, some using pages of CSS, etc. But either I couldn't get them working, or they didn't work with variable-width tables, or they didn't seem worth the effort it looked like it would require to make them work.

But now…

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.

Instead, I created these fixed headers using this post (written way back in 2011!) on Miriam's blog. It's 100% CSS driven, and requires only a few new classes to work.

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.

3 thoughts on “How to add fixed headers to a variable-width table”

    1. Yea, me too. I still run some here as I bump into them, along with the occasional "greatest hits" hints from Mac OS X Hints.

      -rob.

Comments are closed.