CODEWITHSUNDEEP
javascriptjquerycssinternet-explorerhtml-table
Vivek
Vivek

Reputation: 11028

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?

Upvotes: 0

Views: 200

Answers (1)

jchavannes
jchavannes

Reputation: 2710

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/

Upvotes: 1

Related Questions