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

user_60893 0
Viewed 46997

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?

css
9 Answers

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/

user_67928290

Maybe it's not applicable everywhere but...
Use a parent element (e.g. <div> or something) with desired display and set display to inherit on show. like so:

function toggleDisplay(){
  $('#targetElement').toggleClass('hide');
  $('#targetElement').toggleClass('show');
}
#targetElement{
  width:100px;
  height:100px;
  background-color:red;
}

.hide{
  display:none;
}

.show{
  display:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="intermediateElement" style="display:inline-block">
  <div id="targetElement" class="show"></div>
</div>

<button onclick="toggleDisplay()">Toggle</button>

user_8627950

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.

user_50285670
Related