0

I trying to fix at top position by using position:relative,

$(document).ready(function() {
    var container = $(".container");

    container.css("overflow-y", "auto");
    container.css("overflow-x", "hidden");

    container.on("scroll", function() {
        $("table", this).css("overflow-x", "hidden");
        $("th", this).css("position", "relative");
        $("th", this).css("z-index", 1);
        $("th", this).css("top", this.scrollTop + "px");
    });
});

an example of issues https://jsfiddle.net/hth4Ly7q/2/ it works pretty well in chrome,firefox but Safari and IE lags when scrolling, maybe someone knows how can it be fixed in safari? I'm not using absolute/fixed positions because my real table is pretty complex to calculate widths of columns on the fly.

2 Answers 2

2

I tried on Edge and IE. It looks okay. https://jsfiddle.net/55cynfLg/

function setTh(){
var container = $(".container");
$("table", this).css("overflow-x", "hidden");
$("th", this).css("z-index", 1);
container.find("th").each(function(i){
  var td = container.find("tbody tr:eq(0) td:eq("+i+")");
  $(this).css({
     "width": td.width(),
     "left": td.offset().left
  });
});}
0

That's a problem I always had in Safari: you cannot solve it completely. Adding the "mousewheel" event will help a little bit, but it doesn't solve the problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.