Gridview With Fixed Header

Gridview can be scrollable if it is put under a div with the overflow property.But if we scroll down the div ,the grid are go down and headeare are also go upword i.e out of the visible portion of div.
When you apply the following CSS the grid header is visble all the time i.e always in the top of the div.To do this follow the following steps.
First Create a gridview within a div which will be scrollable.
<div id="div1" runat="server"
style="overflow: scroll; width: 100%; height: 200px;">

<asp:GridView ID="GridView1" runat="server"></asp:GridView>

</div>


Create a CSS file "grid.css" within a folder "css" with a class "grid-header".The css folder is under the root directory

.grid-header
{
font-weight: bold;
font-family: Verdana;
font-size: 11px;
background-color: #7A9FCB;
text-decoration: underline;
color: #ffffff;
text-align: left;
position: relative;
top:expression(this.parentNode.parentNode.parentNode.scrollTop-2);
left:expression(this.parentNode.parentNode.parentNode.scrollLeft-1);
right:1px;
}


Call this CSS File from your page which is contain your grid


<link href="../css/grid.css" rel="stylesheet" type="text/css" />


call this css from the HeaderStyle of your gridview

<HeaderStyle CssClass="grid-header"></HeaderStyle>


Now run your application ,scroll the div to the down,you can see that the grid header is fixed all time