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

Question

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

Answer 1

I know this is an old question, but still got here searching the answer to the same question.

You can set displays for non table elements like this:

 display: table;
 display: table-cell;
 display: table-column;
 display: table-colgroup;
 display: table-header-group;
 display: table-row-group;
 display: table-footer-group;
 display: table-row;
 display: table-caption;

This works with table elements to. I had a similar issue with a <th> element, and fixed it with display : table-header-group;.

I tested the result in Chrome, Firefox, Safari and it works.

You can read more here : https://css-tricks.com/almanac/properties/d/display/

Answer 2

I was unable to comment, which seems counterproductive. Ray's answer above also fixed my issue. I had a javascript to hide table rows where a search string does not match the contents of one of the cells.

The example javascript code I used had display = "block" for the rows which remain displayed (display = "none" for the rows to hide).

My search result left only the matching rows displayed, but lost the table formatting, so that all the TDs ran together instead of being formatted in columns. So the table started out with the correct columns, but lost them as soon as the search changed the display property.

Simply changing display = "block" to display = "" fixed it.

Answer 3

When switching between hiding and showing TRs using toggleClass, the following will work:

display:none;

and

display: table-row;

E.g.

$('#the_tr_id').toggleClass('tr_show','tr_hide');

Where:

.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}

Answer 4

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 5

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

Answer 6

Use visibility instead of display for your case.

visibility: hidden;

after load

visibility: visible;

find out more here