How to fix header of table or gridview or datatable without using any plugin and without scroll in table

In this article I am going to tell how fix make table header freeze using javascript and CSS.

You can see live demo below

Name	Phone	Address
table1 data1	table1 data1	table1 data1
table1 data2	table1 data2	table1 data1
table1 data3	table1 data3	table1 data1
table1 data4	table1 data4	table1 data1
table1 data5	table1 data5	table1 data1
table1 data6	table1 data6	table1 data1
table1 data7	table1 data7	table1 data1
table1 data8	table1 data8	table1 data1
table1 data9	table1 data9	table1 data1
table1 data10	table1 data10	table1 data1

You can see above table header is freezed while we scroll down to the page. For this you have to set the header class 'floatingHeader' and gridview class 'persist-area"' of gridview/datagrid or any other table like :

   1:   <asp:GridView runat="server" HeaderStyle-CssClass="persist-header" CssClass="persist-area" ID="grdView">

   2:          <Columns>

   3:              <asp:TemplateField>

   4:                  <ItemTemplate></ItemTemplate>

   5:              </asp:TemplateField>

   6:              <asp:TemplateField>

   7:                  <ItemTemplate></ItemTemplate>

   8:              </asp:TemplateField>

   9:          </Columns>

  10:      </asp:GridView>

Then define floatHeader style like :

   1:   .floatingHeader {

   2:        position: fixed;

   3:        top: 0;

   4:        visibility: hidden;

   5:      }

Finally wirte javasctip code as below: In the below javascript code we are creating a clone of table header and show/hide on the event of scroll.

   1:  <script>

   2:   function UpdateTableHeaders() {

   3:         $(".persist-area").each(function() {

   4:   

   5:             var el             = $(this),

   6:                 offset         = el.offset(),

   7:                 scrollTop      = $(window).scrollTop(),

   8:                 floatingHeader = $(".floatingHeader", this)

   9:   

  10:             if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {

  11:                 floatingHeader.css({

  12:                  "visibility": "visible"

  13:                 });

  14:             } else {

  15:                 floatingHeader.css({

  16:                  "visibility": "hidden"

  17:                 });

  18:             };

  19:         });

  20:      }

  21:   

  22:      // DOM Ready

  23:      $(function() {

  24:   

  25:         var clonedHeaderRow;

  26:   

  27:         $(".persist-area").each(function() {

  28:             clonedHeaderRow = $(".persist-header", this);

  29:             clonedHeaderRow

  30:               .before(clonedHeaderRow.clone())

  31:               .css("width", clonedHeaderRow.width())

  32:               .addClass("floatingHeader");

  33:   

  34:         });

  35:   

  36:         $(window)

  37:          .scroll(UpdateTableHeaders)

  38:          .trigger("scroll");

  39:   

  40:      });

  41:  </script>

That's it finally you will get a table with freeze header:-).