5 Easy Steps to Create a Fixed Header

This jQuery plugin just clones current header and place on top of the table. Follow below 5 steps to create a fixed header row of a normal HTML table or ASP.Net GridView/Datagrid.

Step 1: Include the jQuery library JavaScript file on header section of web page.

Download file (jquery-1.2.6.js)

Step 2: Include the jQuery Fixed Header JavaScript file on header section of web page.

Download file (jquery.fixedheader.js)

Step 3: Add this CSS code in stylesheet or header section of web page.

<style type="text/css">
.dataTable { font-family:Verdana, Arial, Helvetica, sans-serif; border-collapse: collapse; border:1px solid #999999; width: 750px; font-size:12px;}
.dataTable td, .dataTable th {border: 1px solid #999999; padding: 3px 5px; margin:0px;}
.dataTable thead th { background-color:#cccccc; color:#444444; font-weight:bold; text-align:left;}
.dataTable thead a {text-decoration:none; color:#444444; }
.dataTable thead a:hover { text-decoration: underline;}

/* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
/* Firefox 2 */
html</**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
</style>

Step 4: Add this JavaScript code in header section of web page.

<script type="text/javascript">
$(document).ready(function(){
$("#data").fixedHeader({
width: 500,height: 300
});
})
</script>

Step 5: Create an HTML table on the page, including THEAD and TBODY sections. This plug-in uses the THEAD to create the fixed rows, and TBODY is our data.

<table id="data" class="dataTable">

<thead>
<tr>
<th> ….. <\th>
<th> ….. <\th>
</tr>
</thead>

<tbody>
<tr>
<td> ….. <\td>
<td> ….. <\td>
</tr>
</tbody>

</table>

Note: For ASP.Net GridView/Datagrid you have to keep the header part in THEAD and put your Gridview/Datagrid in the TBODY section of table but without Grid header.

Our table or GridView with fixed header is now ready to view.

jQuery Plugin for Fixed Header
jQuery Plugin for Fixed Header

Features
1. Allow horizontal scroll
2. Auto hide box when scroll in IE6
3. Allow to adjust header cell width with your own implementation

Requires
jQuery 1.2.6

Compatibility
IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2

60 thoughts on “5 Easy Steps to Create a Fixed Header

  1. Pingback: Technology Scraps
  2. Darned if I can get this to work. Here is my ASP.Net page. Can anyone suggest what I am doing wrong? Please!

  3. HOLLY COW!!!!

    Three hours to figure out the this webpage uses ” instead of ”

    Change ” to ” and it works great!!!!

  4. Where should i place my datagrid and how can i put header in th.please let me know its urgent.

  5. This J-Query thing is working like a charm. but the width of each td of header is the same, how do i adjust it so that it matches with the data in tbody?

  6. Hi, the solution is very interesting. It works great also for FF 2.0.0.20 and Google Chrome 1.0.154.53. Unfortunatelly IE6 (… yes I also use it) seems to have some problem: in table header the th cells border are not correctly aligned at the tbody cells either if I add a object or I don’t use them.
    To see these problems: http://www.targetcart.com/cercaavanzata_jq.asp
    Thanks!

  7. Hi I can get this to work for some reason. I set up a test project and it works fine but when i try and ref it from my site which uses masterpages I cannot get it to work as I get the Js error on page load: Object Expected

    $(“#table1”).fixedHeader({
    width: 200,height: 100
    });

    Im using the code above to reference the file and table but cant see what wront with it!? Can anyone help?

    Thanks, Ryan.

  8. Hi, I use this this solution, but when I scroll the table a little part of the header of the table scroll together. Is here someone see this kind of problem? Please contact or aswer me. Thanks.

  9. Peoplem, I found a answer to my question… The var scrollBarWidth at the js code was getting a little more of my table header. Thaks everyone.

  10. I have a very simple problem which is also mentioned in the dependency of the plugin and that is resizing the grid i.e. shrink or expand the grid. What i need to do is to make the calculations again… but I am not successfull in that. Has anybod already done anything about that ? please i need a code sample.
    regards

  11. You people can put the THEAD and TBODY Tag as follows

    var tbl = $(“*[id$=’dgrReportData’]”)[0];
    var tblHead = document.createElement(‘thead’);
    var tblBody = document.createElement(‘tbody’);
    // get the first row and the remainder
    var headerRow = $(tbl).find(‘tr:first’)
    var bodyRows = $(tbl).find(‘tr:not(:first)’);
    // remove the original rows
    headerRow.remove();
    bodyRows.remove();

    // SOLUTION HERE:
    // remove any existing thead/tbody elements
    $(tbl).find(‘tbody’).remove();
    $(tbl).find(‘thead’).remove();

    // add the rows to the header and body respectively
    $(tblHead).append(headerRow);
    $(tblBody).append(bodyRows);
    // add the head and body into the table

    $(tbl).append(tblHead);
    $(tbl).append(tblBody);

    $(tbl).fixedHeader({
    height: 100,
    adjustWidth: function(th) {
    if ($.browser.msie) {
    return $(th).width() + 4;
    }
    return $(th).width();
    }
    });

  12. Hello Vikas Khera,

    You have made a good example for showing us the Fixed Header in GridView and Datagrid. Its work in all the browsers. But i am having a small issue in IE 6.0. The same issue which Corrado is having. So can you do something for that or some one from the forums can try for that. Please any 1 reply for this post for the answer.

    Thanks

  13. Hello To all,

    I have made a small Example for those who wants to try in Asp.Net. I have tried this Example in Asp.Net controls. I have given a try in GridView and Datalist Controls. It works great. but having issues in IE 6.0. I am uploading my Sample Project Here :

    http://www.mediafire.com/?lykajnwqndn

  14. Hi,
    I used this solution. It works great.

    I have a table containg 60 columns , and thereby uses horizontal scroll. So I have used thos solution to freeze headers. But when I search some column name using browser find , which is not seen in the first view, say the 50th column, only header table moves to that location. the body table does not move and thus the whole alignment is distorted. Please can someone help me.

    Thanks
    Vijaya

  15. I checked your sample project, it works great…
    but when i do sorting or paging …. GridView headers is not getting fixed.
    kindly help

  16. Hi,

    your solution is working perfect.

    but the problem is –

    i m using paging.in first page there are 50 row so its showing scrollbar correctly . and in next page there are 5 row so there it is not showing scrollbar..but at the place of scrollbar in header it showing blank space.and column header getting sifted from its original position to left.

    could to please tell me solution for that as soon as posible

  17. Hi Vikas,

    Thanks for sharing this. It worked like a charm in all modern browsers. simple yet powerful

    cheers…

  18. Please Help Me to and tell me the step by step process of creating files like html css javascript to make a fixed header table with scrollable table

  19. Am using Eclipse IDE to create a fixed header table , please help to create this , am a very low level beginner in java, html,css,javascript, . i dont know how to create the files too

  20. Please help. nothing is working for me:( below is my full code… Urgent brother…

    Untitled Document

    $(document).ready(function(){
    $(“#data”).fixedHeader({
    width:500,height:300
    });
    })

    .dataTable { font-family:Verdana, Arial, Helvetica, sans-serif; border-collapse: collapse; border:1px solid #999999; width: 750px; font-size:12px;}
    .dataTable td, .dataTable th {border: 1px solid #999999; padding: 3px 5px; margin:0px;}
    .dataTable thead th { background-color:#cccccc; color:#444444; font-weight:bold; text-align:left;}
    .dataTable thead a {text-decoration:none; color:#444444; }
    .dataTable thead a:hover { text-decoration: underline;}
    /* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
    /* Firefox 2 */
    html</**/body .dataTable, x:-moz-any-link {margin:1px;}
    /* Firefox 3 */
    html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}

    …..
    …..

    ….. <\td>
    ….. <\td>

    ….. <\td>
    ….. <\td>

    …..
    …..

  21. Please help. nothing is working for me 😦 below is my full code… Urgent brother…

    //
    //
    //
    //
    //Untitled Document
    //
    //
    //
    //
    //$(document).ready(function(){
    //$(“#data”).fixedHeader({
    //width:500,height:300
    //});
    //})
    //
    //
    //.dataTable { font-family:Verdana, Arial, Helvetica, sans-serif; border-collapse: collapse; border:1px solid #999999; width: 750px; //font-size:12px;}
    //.dataTable td, .dataTable th {border: 1px solid #999999; padding: 3px 5px; margin:0px;}
    //.dataTable thead th { background-color:#cccccc; color:#444444; font-weight:bold; text-align:left;}
    //.dataTable thead a {text-decoration:none; color:#444444; }
    //.dataTable thead a:hover { text-decoration: underline;}
    /////* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
    ///* Firefox 2 */
    //html</**/body .dataTable, x:-moz-any-link {margin:1px;}
    ///* Firefox 3 */
    //html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
    //

    //

    //
    //
    //
    // …..
    // …..
    //
    //
    //
    //
    // ….. <\td>
    // ….. <\td>
    //
    //
    // ….. <\td>
    // ….. <\td>
    //
    //
    // …..
    // …..
    //
    //
    //
    //
    //

  22. Hi

    Everything works great except when the grid show’s footer, the page gets messed up.

    appreciated.

  23. Hi, I use this this solution, but when I scroll the table a little part of the header of the table scroll together. Is here someone see this kind of problem? Please contact or aswer me. Thanks.

    Its realy urgent please help me out

  24. Hi,

    SUB: Down Drop values are overlapping into header part of the grid in IE 6.

    I hope ur doing well.i read ur article (5 Easy Steps to Create a Fixed Header) .I inspired with your component and implemeting this componetnt in my project.But i am facing some problem in IE 6.But the same Grid is working fine in IE 8 and Mozilla.

    My Issue:
    —————
    In my tabel we have 23 columns with dropdown values and text box values with Multi-row Headers .while i am scrolling down only drop down values are overlapping into header part of the grid.

    If possble plz share ur personal email id ,so i can send my screen shot.This is an important module we have to finish it up as early as possible. i am struggling this module from past 15 days, at last u read ur article.plz respond as early as possible with example.

    Thanks & Regards
    Raju.

  25. Has anyone had problemw with the post backs increasing in time. Works okay the first time or two that I do a column sort or filter change, but soon becomes intolerablly slow.

  26. hi Vikas Khera,

    nice work Thanks for the solution
    I am newbie so if my question is silly please excuse me
    I have used this it is working fine when i use this in a single page.
    But i need the fixed header table to be refreshed periodically to show the updated data so i load the fixed header table in a innerHTML of a div with a ajax request in this case fixed header is not working please help me in this case.

    Thanks in advance,

    Hari

  27. hi Vikas Khera,

    nice work Thanks for the solution
    I am newbie so if my question is silly please excuse me
    I have used this it is working fine when i use this in a single page.
    But i need the fixed header table to be refreshed periodically to show the updated data so i load the fixed header table in a inner HTML of a div with a Ajax request in this case fixed header is not working please help me in this case.

    Thanks in advance,

    Hari

  28. hi Vikas Khera,

    nice work Thanks for the solution
    I am newbie so if my question is silly please excuse me
    I have used this it is working fine when i use this in a single page.
    But i need table to be refreshed periodically to show the updated data how to do that

    Thanks in advance,

    Hari

  29. Hi…its nice work ….but i am facing problem ” NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle] “…..Pls help me….

  30. A table is having header + a row. Each td contains a table. fixedheadertable plugin not working for this structure of table. ANy idea how can i make it work?

  31. Valuable information. Lucky me I found your site by accident, and I’m shocked why this accident did not happened earlier! I bookmarked it.

  32. I like what you guys are up too. Such intelligent work and reporting! Carry on the excellent works guys I have incorporated you guys to my blogroll. I think it will improve the value of my web site 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s