How to freeze column header row of a table in Firefox using CSS
ASP.NET Gridview control renders as an HTML table. I picked up this technique below but cannot quite get it right:
I am struggling getting my Gridview in ASP.NET 2.0 Visual Studio 2005 to freeze the column header row and provide for scrolling of the remaining data rows. My specific problems right now are:
* (IE7) column headers freeze as intended and do not scroll BUT scroll bar is not initially visible to user (requires scrolling with mouse wheel before vertical scroll bars are exposed in gridview)
* (Firefox 2.0.10) column header row just scrolls out of sight like any other row
Here is part of my default.css in my default App_Theme folder:
/* So the overflow scrolls */
height: 380px; /* must be greater than tbody*/
margin: 0 auto;
/* Keep the header cells positioned as we scroll */
.coveragesContainer table th
top: expression(this.offsetParent.scrollTop); /* see note just below */
/* For alignment of the scroll bar */
.coveragesContainer table tbody
Please note that the editor in Visual Studio 2005 complains about the line above top: expression(this.offsetParent.scrollTop); with the design time error (squiggle line) reading as: 'expression(this.offsetParent.scrollTop)' is not a valid value for the 'top' property. Not sure what is happening there...maybe significant?
Click the State dropdownlist and choose a state with many counties (e.g. Georgia) to introduce the overflow and repro the behavior of the scroll bar not being initially visible (IE7); same sequence with Firefox causes the column header to scroll out of view like all other rows.