Question

I have the follow code to fix the header of the table while scrolling down the page.

I don’t know why, but in fiddle are not working in FF 🙁

See code: http://jsfiddle.net/S63dy/

If you try outside fiddle it’s works like a charm in FF, but the borders aren’t showing on IE.

Im using IE9 and IE Tester (and i tried on another machine with IE8).

I try to use a header just by styling a row and using inside, but no borders on IE too.

Can someone help me ?

Thanks and sorry the bad english

Answer 1

Your CSS seems ok, but you are setting the visibility of the whole cloned table to hidden – it looks like this is preventing the border rendering.

You could change this:

$("#clone").css({
    visibility: 'hidden'
});

to:

$("#clone").children().not('thead').css({
    visibility: 'hidden'
});

See this jsfiddle.

Or even better just remove the unnecessary tbody and don’t touch the visibility at all.

Or clone the thead on its own – this will take less memory if you are dealing with a huge table.