how to revert back to normal after display:none for table row

Question

Hi all,

Basically, i have a table. Onload, i set each row of the table to display:none since i have a lot of javascript processing to be done and i don't want user to see it while it is being done. I've set a timer to display it after a little while, my problem is that i can't get the table row to display like a table row. If i set display:block, it would just not line up with the headers (th). The only solution i've found is display: table-row from css2, but ie 7 and below does not support this declaration.

Any solution?

Thanks a lot!

Jason

Answer 1

set display to an empty string - this will allow the row to use its default display value and so works in all browsers

Answer 2

Why don't you put the table in a div, make that div's display to none, and when the processing is done, set div's display back to block or inline block or whatever you need there...

Answer 3

IE7 and below use display: block for table elements; the other browsers correctly use table-row, table-cell etc.

Whilst you could browser-sniff and choose different display values, it's much easier to hide a row indirectly. Add a stylesheet rule like:

.hidden { display: none; }

and then change the className of the row element to include or not include the hidden class. When the class is removed, the display style will jump back to its default value, whichever that is on the current browser.

You can also use containment selectors to hide multiple elements inside one element, then make them all visible/hidden at once by changing one class. This is faster than updating each style separately.

i have a lot of javascript processing to be done and i don't want user to see it while it is being done.

They generally won't anyway. Changes usually don't render on-screen until control has passed out of your code back to the browser.