Freeze table headers pure CSS?

HTML & CSS
1

I have large, dynamically driven tables with columns of varying widths. I was hoping to find a pure CSS way to implement this but so far all I’ve found are solutions for tables with fixed column widths. Is there a way to freeze table headers when you have tables with variable width columns?

2

Here you go.

We had a quiz on this not too long ago.

3

Excellent quiz! Is there a solution that doesn’t require a fixed table height? What I’m hoping for is to allow the table to extend however far it needs to but to be able to scroll while keeping the header in place. I don’t really need a footer.

4

Then don’t put a footer in there. And you don’t want a height…but when do you want scrolling…?

5

Just regular page scrolling. There’s a js example here but was hoping to to it without js:

http://cross-browser.com/x/examples/xthf.html

The problem is that I’m building an application for many users so the table lengths may vary widely. Some users may only have 2 or 3 rows in a table - others may have several hundred. I’m trying to find a fix that won’t affect the look of the page for users with only a few rows, but that will kick in the header freeze for longer tables. I’m open to other ideas.

6

In Opera it is glitchy a little bit. And no as far as I know there are no ways.

7

Ok, thanks. I may end up using the one above - just need to play with it a bit in my head.

8

Probably a dumb question but I assume there’s no way to add a min-height kind of thing so I could set the table at 6 or 7 rows for the default and then have it stretch for users with more data?

9

min-height wil still allow for expansion and thus you will have to set a max-height in conjunction with that to stop it at a certain point to allow the scrollbars to take effect.

You will need an expression for IE6 though.

10

Ok - well, that would take care of some of my reservations. What’s the IE6 fix for that?

11

What’s the IE6 fix for what?

12

You said that I’d need an expression for IE6 - wasn’t sure what you meant.

13

Yes you need an expression for max-height. View the FAQs at the top of this thread on how t odo that. Or just google “IE6 max-height expression”. There are many articles on this.