GridView with Fixed Headers in ASP.Net using C# and SQL using CSS

We everyday use grid view for viewing data the problem with the data on the web is that when we scroll down the header of the gridview also go down which is not good and makes things difficult to read.

So I made a program which will stop this and the girdview will keep on scrolling without moving the headers this can be accomplished with both CSS and Jquery we will be using CSS for this.

First we will make a connection string and fetch the data.Then we assign the data to the Gridview

sda.Fill(dt);
     GridView1.DataSource = dt;
     GridView1.DataBind();
     GridView1.HeaderRow.Attributes["style"] = "display:none";
     GridView1.UseAccessibleHeader = true;
     GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

The magic starts with the line written in this the Style of Header row we have disabled the original headers and we will now make our own headers.

We make a html table and put data in it

ID Name

Then we change the gridview settings

And then apply the style sheet

  .grid
    {
        font-family:Arial;
        font-size:10pt;
        width:600px
    }
    .grid THEAD
    {
         background-color:Green;
         color:White;
    }