基本上，我有一张桌子。在加载时，我将表格的每一行设置为display:none，因为我有很多 javascript 处理要完成，并且我不希望用户在完成时看到它。我已经设置了一个计时器在一段时间后显示它，我的问题是我无法让表格行像表格行一样显示。如果我设置display:block，它就不会与标题（th）对齐。我找到的唯一解决方案是来自 css2 的display: table-row，但即 7 及以下不支持此声明。
有什么办法吗？
【问题讨论】：
标签： css
将 display 设置为空字符串 - 这将允许该行使用其默认显示值，因此适用于所有浏览器
【讨论】：
display: none 属性分配class，然后在完成后删除class 名称
display:none 应用于元素的全局范围时，不可能知道要恢复到哪个display 值。在这些情况下，这个技巧非常有用。
你为什么不把表格放在一个div中，让那个div的显示为none，当处理完成后，将div的显示设置回block或inline block或任何你需要的东西.. .
【讨论】：
IE7及以下使用display: block作为表格元素；其他浏览器正确使用table-row、table-cell等。
虽然您可以浏览器嗅探并选择不同的显示值，但间接隐藏一行要容易得多。添加样式表规则，如：
.hidden { display: none; }
然后将行元素的className 更改为包含或不包含hidden 类。当类被移除时，display 样式将跳回到它的默认值，无论是在当前浏览器上。
您还可以使用包含选择器将多个元素隐藏在一个元素中，然后通过更改一个类使它们全部可见/隐藏。这比单独更新每个style 更快。
我有很多 javascript 处理要完成，我不希望用户在完成时看到它。
他们通常不会。在控制权从您的代码传回浏览器之前，更改通常不会呈现在屏幕上。
【讨论】：
display: none 并希望重置它，这也有效。
当使用 toggleClass 在隐藏和显示 TR 之间切换时，以下操作将起作用：
display:none;
和
display: table-row;
例如
$('#the_tr_id').toggleClass('tr_show','tr_hide');
地点：
.tr_hide {
display:none;
}
.tr_show {
display: table-row;
}
【讨论】：
display: table-row 不是一个选项。
display: unset;
【讨论】：
visibility 元素的规则只是从视口中隐藏元素。但是，由于正在渲染元素，因此元素的空间不会被后面的元素填充。 display 规则设置为无，不会在视口上呈现元素...
【讨论】：
visibility: collapse 可能优于 visibility:hidden。 Mozilla 在developer.mozilla.org/en-US/docs/Web/CSS/visibility 指出了一些浏览器兼容性问题。
也许它并不适用于所有地方，但是...
使用具有所需显示的父元素（例如<div> 或其他内容）并将显示设置为inherit on show。像这样：
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>【讨论】：
我知道这是一个老问题，但仍然在这里寻找相同问题的答案。
您可以像这样为非表格元素设置显示：
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;
这适用于表格元素。我在 <th> 元素上遇到了类似的问题，并用 display : table-header-group; 修复了它。
我在 Chrome、Firefox、Safari 中测试了结果，它可以工作。
您可以在这里阅读更多内容：https://css-tricks.com/almanac/properties/d/display/
【讨论】：
我无法发表评论，这似乎适得其反。 Ray上面的回答也解决了我的问题。我有一个 javascript 来隐藏搜索字符串与其中一个单元格的内容不匹配的表格行。
我使用的示例 javascript 代码具有 display = "block" 用于保持显示的行（display = "none" 用于隐藏的行）。
我的搜索结果只显示了匹配的行，但丢失了表格格式，因此所有 TD 一起运行，而不是按列格式化。因此，表格开始时包含正确的列，但一旦搜索更改了显示属性，它们就会丢失。
只需将 display = "block" 更改为 display = "" 即可修复它。
【讨论】：