Vivek Vivek - 14 days ago 5
CSS Question

position:fixed(css) behaving differently in different browser

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

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/