Matt Berseth

I was recently browsing through some of the CSS samples on Stu Nicholls web site.  I came across one that showed a couple of examples of how CSS can be applied to HTML tables to provide the 'frozen columns headers' feature. 

[Update: 10/1/2007]: I wrote a follow-up post describing how to acheive this using only CSS.

Live Demo (IE Only - this is just a prototype) | Download

In case you missed it, Dan Wahlin also recently created a nice AJAX Extender Control that accomplishes that same task using the ASP.NET AJAX client-side extender framework.  Dan's solution seems to work great (I have downloaded and played with it, but I am not using it in our production application), but I after looking at Stu's CSS only solution, I was curious what it would take to create an AJAX-less solution. 

Stu's and Dan's solution are pretty similar.  Both embed the table within a DIV element to handle the overflow scrollbar and they both define the column headers within the THEAD element.  Stu's samples don't use ASP.NET so he works directly with HTML tables.  Dan's sample extender control extends the regular ASP.NET GridView control.  If you have viewed the HTML the GridView control generates, you have probably noticed that it doesn't create a THEAD element, but instead just renders the column headers as the first TR within the TABLE.  Because of this, Dan's extender control moves the first TR into the THEAD.  Both solutions fix the positioning of the THEAD row so as the grid is scrolled the header always remains visible.

My approach for developing an AJAX-less solution for this was to have the GridView render the column headers within the THEAD element so Stu's styles can be applied without the need for modifying the table after it is rendered to the client.  It turns out the GridView Control Adaptor from the ASP.NET Control Adaptor site does exactly this (no code changes required).  If you aren't familiar with Control Adaptors, you can read more about them here.   

Because Stu already has the CSS attributes defined, and Microsoft had already developed the GridViewAdaptor, I just wired them together by defining the styles for the classes the GridViewAdaptor adds to the table it generates.  That's really all it took.  Also, because I was doing this for research, I only went as far as to get it working in IE.  Nevertheless, I did learn a few things that I thought I would share:

• Control Adaptors allow you to change the HTML that is produced when an ASP.NET control is rendered.  This will allow you to plug in a new adaptor for an existing control if you need slightly (or radically) different HTML that what ASP.NET generates by default.  Keep this in mind next time you are debating between creating a new control or inheriting from an existing one.  Maybe an adaptor would fill your needs.
• CSS is very flexible and sometimes it may help to remind yourself of its capabilities by viewing interactive samples of what can be done with purely CSS solutions.  You should check out Stu's site and view some of the samples he has created.

That's it.  Enjoy.