CSS 显示后如何恢复正常：表格行无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3522643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to revert back to normal after display:none for table row
提问by FurtiveFelon
Basically, I have a table. Onload, I set each row of the table to display:nonesince 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-rowfrom css2, but ie 7 and below does not support this declaration.
基本上，我有一张桌子。Onload，我将表的每一行设置为，display:none因为我有很多 javascript 处理要完成，我不希望用户在完成时看到它。我已经设置了一个计时器来在一段时间后显示它，我的问题是我无法让表格行像表格行一样显示。如果我设置了display:block，它就不会与标题（th）对齐。我找到的唯一解决方案display: table-row来自 css2，但即 7 及以下版本不支持此声明。
Any solution?
有什么解决办法吗？
回答by Ray
set display to an empty string - this will allow the row to use its default display value and so works in all browsers
将 display 设置为空字符串 - 这将允许该行使用其默认显示值，因此适用于所有浏览器
回答by bobince
IE7 and below use display: blockfor table elements; the other browsers correctly use table-row, table-celletc.
IE7 及以下display: block用于表格元素；其他浏览器正确使用table-row，table-cell等等。
Whilst you couldbrowser-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 classNameof the row element to include or not include the hiddenclass. When the class is removed, the displaystyle will jump back to its default value, whichever that is on the current browser.
然后更改className行元素的 以包含或不包含hidden该类。当类被移除时，display样式将跳回其默认值，以当前浏览器上的值为准。
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 styleseparately.
您还可以使用包含选择器将多个元素隐藏在一个元素中，然后通过更改一个类使它们全部可见/隐藏。这比style单独更新每个要快。
i have a lot of javascript processing to be done and i don't want user to see it while it is being done.
我有很多 javascript 处理要完成，我不希望用户在完成时看到它。
They generally won't anyway. Changes usually don't render on-screen until control has passed out of your code back to the browser.
反正他们一般不会。更改通常不会在屏幕上呈现，直到控制权从您的代码传回浏览器。
回答by Sheharyar
Revert value to default:
将值恢复为默认值：
display: unset;
回答by Apit John Ismail
回答by jolt
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 blockor inline blockor whatever you need there...
你为什么不把表中一个div，使该分区的显示器none，并在处理完成后，集div的显示恢复block或inline block或任何你需要有...
回答by Rzassar
Maybe it's not applicable everywhere but...
Use a parent element (e.g. <div>or something) with desired display and set display to inheriton show. like so:
也许它并不适用于任何地方，但是......
使用<div>具有所需显示的父元素（例如或其他东西）并将显示设置为inherit显示。像这样：
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>回答by Szekelygobe
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;.
这适用于表格元素。我对一个<th>元素有类似的问题，并用display : table-header-group;.
I tested the result in Chrome, Firefox, Safari and it works.
我在 Chrome、Firefox、Safari 中测试了结果并且它有效。
You can read more here : https://css-tricks.com/almanac/properties/d/display/
您可以在此处阅读更多信息：https: //css-tricks.com/almanac/properties/d/display/
回答by AnotherOther
When switching between hiding and showing TRs using toggleClass, the following will work:
当使用 toggleClass 在隐藏和显示 TRs 之间切换时，以下将起作用：
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;
}
