50

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?

Adrian Cid Almaguer
  • 7,815
  • 13
  • 41
  • 63
FurtiveFelon
  • 14,714
  • 27
  • 76
  • 97

9 Answers9

76

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

Ray
  • 21,485
  • 5
  • 48
  • 64
  • 22
    The right way to do it would be to assign a `class` with the `display: none` property and then to remove the `class` name when done – Romhein Aug 19 '10 at 14:21
  • 1
    @Nip in some cases, such as when you apply `display:none` to a global scope of elements, it is impossible to know which `display` value to revert back to. In those cases, this tip is very useful. – Christophe Marois May 31 '13 at 01:01
  • 2
    This answer together with @Romhein's comment makes the perfect solution! +1 to both... – Romeo Sierra Sep 27 '17 at 08:41
8

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.

bobince
  • 528,062
  • 107
  • 651
  • 834
3

Revert value to default:

display: unset;
Sheharyar
  • 73,588
  • 21
  • 168
  • 215
  • I use this and seems to be breaking everything. – Apit John Ismail Dec 29 '16 at 15:00
  • This wouldn't work! `visibility` rule for an element just hides the element from the viewport. But, since the element is being rendered, the space for the element will not be filled by the elements followed. `display` rule set to none, will not render the element on the viewport... – Romeo Sierra Sep 27 '17 at 10:05
2

Use visibility instead of display for your case.

visibility: hidden;

after load

visibility: visible;

find out more here

Apit John Ismail
  • 2,047
  • 20
  • 19
  • This seems more correct than the accepted solution. `visibility: collapse` may be preferable over `visibility:hidden`. Mozilla notes some browser compatability issues at https://developer.mozilla.org/en-US/docs/Web/CSS/visibility. – Mike Grove aka Theophilus Apr 17 '17 at 15:55
1

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...

tomsseisums
  • 13,168
  • 19
  • 83
  • 145
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/

Szekelygobe
  • 2,309
  • 1
  • 19
  • 25
0

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>
Rzassar
  • 2,117
  • 1
  • 33
  • 55
0

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.

Brent Butler
  • 13
  • 4
-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;
}
AnotherOther
  • 107
  • 1
  • 7
  • 1
    This doesn't add anything helpful to the answers already here, and the OP said `display: table-row` was not an option. – Bobo Aug 01 '14 at 17:03