Question

I am trying to freeze the table header.. in order to achieve the same I have written this code.. it works fine but header seems to shivering.

So I changed a code little bit and output is pretty good now, you can see it here.
But the problem is, this changed code works in Mozilla but not in IE.
I tried multiple approach but couldn’t get the exact behaviour in IE as it is in second fiddle.
In second fiddle, in side doc ready I have changed existing code with this one-

 var originalHeaderRow = $("tr:eq(1)", this)
        originalHeaderRow.before(originalHeaderRow.clone());
        var clonedHeaderRow = $("tr:eq(1)", this)
        clonedHeaderRow.addClass("tableFloatingHeader");
        clonedHeaderRow.css("position", "fixed");
        clonedHeaderRow.css("top", $("tr:eq(1)").css("top"));
        var left = $("tr:eq(1)").offset().left;
        clonedHeaderRow.css("left", left);  

Any suggestion or any hint where I am going wrong?

Answer 1

Instead of placing the floatingHeaderRow into the table, place it in the body with a fixed position. This way it isn’t constantly having to calculate a new position.

Something like this, but not perfect: http://jsfiddle.net/NtBYa/2/