0

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

void
  • 482
  • 3
  • 12
  • Add the border to TDs, not TRs – 472084 Jul 17 '12 at 13:51
  • possible duplicate of [Why border of not showing in IE?](http://stackoverflow.com/questions/2832260/why-border-of-tr-not-showing-in-ie) – Jukka K. Korpela Jul 17 '12 at 13:55
  • Do not rely on fiddle too much. – Ashwin Singh Jul 17 '12 at 13:56
  • possible duplicate of [jQuery - how to freeze table header and allow scrolling of the rest of the rows](http://stackoverflow.com/questions/983031/jquery-how-to-freeze-table-header-and-allow-scrolling-of-the-rest-of-the-rows) – Tony Jul 17 '12 at 14:43
  • @Jleagle: I tried to add border on TDs, TRs, THs, the whole table. Nothing works or the scumbag IE. And Tony my question is not about freeze the header while scrolling. Thanks guys, but I'm still stuck on this. – void Jul 17 '12 at 14:54

2 Answers2

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.

jfrej
  • 4,548
  • 29
  • 36
  • Thank you so much, It works! BTW i tried to clone only the thead but it mess with the width :( – void Jul 18 '12 at 12:54
0

You should not be styling the TH within your CSS.

TH is a header cell.

TD cells are for data which should work fine for you.

Eric Whitehead
  • 130
  • 5
  • I treid to use the first row (with TDs not THs inside it) as the header. It's works too, but on IE it still not showing the border. – void Jul 17 '12 at 14:55