position: fixed on a table row?

I want to make a table such that the heading row stays in place as you scroll, so you always know what information you’re looking at underneath. I tried setting "position: fixed" on the table row, but then the cells "collapse" (they shrink to just large enough to fit their text, no longer aligning with the rows underneath).

The things is… it’s not really a table row up top it’s just an image. I’m not sure if table rows will respect fixed positioning. I assume they do not, they have their own special positioning rules. Likewise, you can’t adjust a cell with relative positioning (and stuff like that).

Yeah, that’s what I figured. When I set position: fixed it looks like it takes the row out of the normal "flow" of the table, and everything gets screwy (like the background color from the row underneath moves up behind the fixed row above it).

I guess an image – or just a separate div rather than a table row – is the way to go.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.