CSS-Only Sticky Headers for Tables, Using ‘position: sticky’

In the last few days, I’ve seen a few people talking about a new CSS property, position: sticky. The idea is straightforward, and neat: If an object has “position:sticky”, treat it as a normal position:relative block, as long as it’s on screen. If the user scrolls far enough that the object (let’s say it’s an h3) would be scrolled off the screen, but the h3’s parent div is still visible onscreen, treat the object as though it were position:fixed (at whatever top or left or right or bottom parameters you give it).

That explanation gets a little complicated, but it’s a principle you’ve seen before. Basically, if the parent div containing the headline (or whatever) is still on-screen, the headline should remain on-screen as well. Scroll down a bit to see an example (look for a table titled “The First 40 Elements”).

Why is this new implementation interesting?

What’s neat about this is that you get the effect of the static table headers by introducing a few lines of CSS. No jQuery, no weird CSS that breaks the semantic intent of the content, and no javascript handlers built off scroll events.

Lots of thanks to the developers at Apple for making this work.

So, tables?

One of the best use-cases for this is with really long tables. That is, tables where you want to see the different columns’ headers, as well as the data in the table. Tables like we sometimes have in PearBudget.

This is a use-case that, so far, has been served by javascript. A great front-end dev (and friend), Russell Heimlich, built a great implementation of it as a plugin for jQuery, Prototype, MooTools, and Dojo: Sticky Header. And his plugin is probably the best way to implement this effect for now, since browser support for this CSS property is currently almost non-existent.

But how do you make sticky headers with just CSS?

It’s super-easy. All you do is add

position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;

to the CSS for whatever object you want to stay on-screen. In the “elements” example below, I’ve applied that CSS to the <thead>.

Can I see an example?

Sure thing. If you’re using the latest version of a WebKit-based browser (or, in the future, if other browsers are supporting this and you’re on one of those), the following table will show sticky headers. The thing to look for: the gray bar with the columns’ headers will remain visible, even when you’re scrolling far down the table.

Revisiting the description above of what’s going on, as long as the parent element (<table></table>) is visible on-screen, the <thead> (and everything in it) should be visible as well.

If you aren’t using a browser that can handle this, it’ll just look like a normal table, and the header row will scroll offscreen like any other position: relative element. Again, there’s no javascript in play here.

You’ll notice that the effect degrades gracefully … if the user is not on a browser that supports position: sticky, the header just scrolls off-screen, like any other object on (read: off) the screen.

One thing to try doing (if you’re on the main charliepark.org page and not just this post’s page) is to scroll down a ways, and then scroll back up so you can see the table. You’ll notice the headers show up as soon as the table is in view.

Anything to be careful about?

First, this property is new. It’s not supported at all, apart from the beta builds of Webkit-based browsers. So caveat formator. Again, if you really want for your users to benefit from sticky headers, go with a javascript implementation.

Second, if you do use it, you’ll need to incorporate vendor prefixes. Perhaps position: sticky will work one day. For now, though, you need to use position:-webkit-sticky (and the others; check the block of CSS further up in this post).

Third, there aren’t any positioning defaults at the moment, so you need to at least include top: 0; in the same CSS declaration as the position:-webkit-sticky. Otherwise, it’ll just scroll off-screen.

Have fun, kids!