A Better Fixed GridView Header for ASP.NET, Page 2
Adding the HTML Div and Table Stubs
The GridView will have a header. For the technique for pinning it, you could use the GridView's actual header, but is actually a little easier to use a clone. The reason is that if you pin the GridView's actual header, you have to adjust its position differently when you have scrolled to the top (or you hide row 1), and you might have to account for a positioned header's index when manipulating the data. For these reasons, I elected to use a stub div and table to mimic the fixed header.
Tip: Did you know that a table header is rendered as a <TR> with <TH> children instead of <TD> (cells) children? Did you also know that you can place the row containing the header (or <TH> cells) anywhere in a Table? You can.
To add the div and table stub, open your web page and add the following HTML just above the GridView's tag. Here is the additional HTML followed by complete HTML/ASP for the sample form (in Listing 2).
<div id="fixedHeader" style="position: absolute"> <table id="header" style="position: absolute"> </table> </div>
Listing 2: The complete listing for the sample web page, showing the relationship of the GridView and the HTML that will be used to affix a header.