I'm working with an HTML fixed design that contains a center-aligned table with extensive data scrollable both vertically and horizontally. To address the issue of keeping column headers visible when scrolling vertically, I used jQuery's clone() and append() functions to create a new fixed table above the report table. However, I am facing a challenge where scrolling horizontally causes the fixed table to move as well, misaligning the headers with the columns. How can I ensure that the new fixed table stays in place during horizontal scrolls without shifting? The fixed table is contained within the browser window. While I have created a JSFiddle example, the headers do not display when there is a scroll in this sample. On my website, the headers show up when there is vertical scrolling. http://jsfiddle.net/wnxJ4/8/
var tableOffset = $("#table1").offset().top - 10;
var $header = $("#table1 ").clone();
var $fixedtablehead = $("#fixedtablehead").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedtablehead.is(":hidden")) {
$fixedtablehead.show().css({width: $('#table1').width()});
}
else if (offset < tableOffset) {
$fixedtablehead.hide();
}
});
Implementing the following code snippet for horizontal scrolling has been challenging:
var position = $(window).scrollLeft();
var lef=$('#fixedtablehead').offset().left;
alert(lef);
alert(lef-position);
$('#fixedtablehead').css('left',lef-position-position);