Question

I have a table with some of the rows starting off hidden (display:none) and I’m using jQuery to show them. I’ve gathered from Firebug that jQuery detects that they’re table rows and sets them to display:table-row rather than block.

However, IE6 (and I think 7, too) doesn’t support table-row, so does jQuery do something different for those browsers?

Another problem seems to be using any function other than show() causes 100% CPU in Linux for Firefox and Chrome and they become unresponsive until I get a warning about a slow script. In Opera, the rows emerge very slowly, one by one. Is there a way to make the rows appear smoothly the same way as a normal <div> would?

Answer 1

Unfortunately this isn’t possible. The reason is that a table-row doesn’t have layout. It is strictly a structure element not a display element. The table-data is neither a display element, it’s a structure element as well. You can however try this. This will hide the contents of the table-data, effectively collapsing the table row.

// show
$("table tr.show").find("td *").show();
// hide
$("table tr.hide").find("td *").hide();