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"); floatingHeaderRow.css("z-index", "20"); // 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"); } }); } $(document).ready(function() { $("table.tableWithFloatingHeader").each(function() { $(this).wrap("
"); var originalHeaderRow = $("tr:first", this) originalHeaderRow.before(originalHeaderRow.clone()); var clonedHeaderRow = $("tr:first", this) clonedHeaderRow.addClass("tableFloatingHeader"); clonedHeaderRow.css("position", "absolute"); clonedHeaderRow.css("top", "0px"); clonedHeaderRow.css("left", $(this).css("margin-left")); clonedHeaderRow.css("visibility", "hidden"); originalHeaderRow.addClass("tableFloatingHeaderOriginal"); }); UpdateTableHeaders(); $(window.parent).scroll(UpdateTableHeaders); $(window.parent).resize(UpdateTableHeaders); });