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

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


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.


Revert value to default:

display: unset;

Tags:

Css