Floating Header in HTML using JQuery

0 0 vote
Article Rating

You all know the freezed pane feature of MS Excel. What if you want to implement that in HTML ?? For example you have an HTML table and you want the header to remain on top when the header scrolls off. Hmm still confusing. Check out the following example.


I found a very cool solution to implement this problem using Jquery. Lets review that.

$(document).ready(function() {
    $("table#TBL").each(function() {
        $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");

        var originalHeaderRow = $("tr:first", this)
        var clonedHeaderRow = $("tr:first", this)

        clonedHeaderRow.css("position", "absolute");
        clonedHeaderRow.css("top", "0px");
        clonedHeaderRow.css("left", $(this).css("margin-left"));
        clonedHeaderRow.css("visibility", "hidden");


This is the main Jquery function that is called when every the document is ready. This functions looks for any TABLE with an ID of “TBL” and if the code finds any such table then it appends a few divs with certian CSS properties to it. This functions gives call to another function named “UpdateTableHeaders”. Following is the code of that function.

function UpdateTableHeaders() {
    $("div.divTableWithFloatingHeader").each(function() {
        var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);
        var floatingHeaderRow = $(".tableFloatingHeader", this);
        var offset = $(this).offset();
        var scrollTop = $(window).scrollTop();
        if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
            floatingHeaderRow.css("visibility", "visible");
            floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");

            // Copy cell widths from original header
            $("th", floatingHeaderRow).each(function(index) {
                var cellWidth = $("th", originalHeaderRow).eq(index).css('width');
                $(this).css('width', cellWidth);

            // Copy row width from whole table
            floatingHeaderRow.css("width", $(this).css("width"));
        else {
            floatingHeaderRow.css("visibility", "hidden");
            floatingHeaderRow.css("top", "0px");

This function checks that the header is scrolled off or not. If the header is scrolled off then it shows the header on the top of the page.

To use the code you just need the “FloatingHeader.js” file (attachment given at the end) and the jQuery library.

How to Use the Code:

1- Add both the files to your project. (“FloatingHeader.js” ,jQuery library)

2- Set the ID of the HTML table to “TBL” (If you want to set the name of your table to something else then you will have to modify the FloatingHeader.js file). Example:


3- Reference both the javascript files in your file. Example

<script src="Jquery-1.4.2-min.js"></script>
<script src="FloatingHeader.js"></script>

4- Done.

If you have any questions/suggestions  regarding this then kindly, leave a comment.



Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x