Fixed GridView Header Using CSS

In this post I will show you how you can fix the header of the grid so if user scroll down then the header will be in the view. Here is out of my example page and you can see that I have scroll down the grid and the grid header is in view so the user can see header text as he/she scroll down the grid.

And here is the my Css which is used to format the header of the grid in this Css class which is named GridHeader. The property which is used to fixed the position of the grid header is the Position property which has value relative.

.GridHeader
{
 background-color: #738AAD;
 border-bottom: 1px solid #00347B;
 color: #FFFFFF;
 height:25px;
 font-weight: bold;
 font-size:13px;
 padding-left: 2px;
 padding-top: 2px;
 text-align: left;
 position:relative ;
}

You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!