Freezing GridView Column Headers using Only CSS

I received the following comment from a kind reader named Mitch:

I have also noticed that applying a skin to the gridview also seems to create TH elements for the headers. I have a simple solution that freezes the headers by doing the following:

apply a skin to a gridview.
wrap the gridview in a div or fieldset.
Apply a css class to the wrapper that sets the overflow to scroll and the TH position to relative. You may need to set the TR height to 0px for IE.

I set the height of the wrapper in the local style so I can reuse the css class. I have tested this in IE6 & 7 and Firefox and it works great.

Wow. If this is true, it has a number of advantages over my original solution:

It can be applied without using Control Adaptors - one less dependency
It works with both IE and FF
It is really simple!

So I took this feedback and tried to fix up my old sample site. I created a new site from my trusty GridView web site template and started following Mitch's advise. First off, I created a regular GridView and placed it inside a DIV element like so. Notice I assign the DIV to the container class.

<div class="container" style="height:300px; 700px;">
    <asp:GridView 
        runat="server" AutoGenerateColumns="false" 
        AllowSorting="true" DataSourceID="odsCustomers" BorderWidth="0px">
        <Columns>
            <asp:BoundField HeaderText="ID" DataField="CustomerID" SortExpression="CustomerID" />
            <asp:BoundField HeaderText="Name" DataField="ContactName" SortExpression="ContactName" />
            <asp:BoundField HeaderText="Title" DataField="ContactTitle" SortExpression="ContactTitle" />
            <asp:BoundField HeaderText="Address" DataField="Address" SortExpression="Address" />
            <asp:BoundField HeaderText="City" DataField="City" SortExpression="City" />
        </Columns>
    </asp:GridView>
</div>

Next, I created the container css style class as Mitch suggests ...

/* So the overflow scrolls */
.container {overflow:auto;}

/* Keep the header cells positioned as we scroll */
.container table th {position:relative;}

/* For alignment of the scroll bar */
.container table tbody {overflow-x:hidden;}

Finally, I added back in the other styles that are not related to the frozen headers to spruce things up a bit. At this point I opened IE to test it out and sure enough it works great. The only problem is that (again) it doesn't work in FireFox. It behaves better than my original solution in that the grid renders fine, just the header columns do not stay stationary. Even though it isn't perfect, I figured I would pass Mitch's solution on since it seems to be hands down better than my original one. If anyone know's how FF can be supported with pure CSS, I would be interested.

That's it. Enjoy!

Freezing GridView Column Headers using Only CSS

Recently I wrote an article describing how you could use CSS plus a GrdiView Control Adaptor to add the 'frozen column headers' feature to your GridView.