Css 显示后如何恢复正常：表行无

基本上，我有一张桌子。Onload，我将表的每一行设置为

display:none

，因为我有很多javascript处理要做，而且我不希望用户在完成时看到它。我已经设置了一个计时器，让它在一段时间后显示，我的问题是我不能让表行像表行一样显示。如果我设置了

display:block

，它将不会与标题（th）对齐。我找到的唯一解决方案是css2中的

display:table row

，但ie 7及以下版本不支持此声明

---

有任何解决方案吗？

将display设置为空字符串-这将允许行使用其默认显示值，因此在所有浏览器中都可以使用

为什么不将表放在一个div中，将该div的显示设为

无

，处理完成后，将div的显示设置回

块

或

内联块

或您需要的任何位置…

IE7及以下使用

显示：块

用于表格元素；其他浏览器正确使用

表行

、

表单元格

等

虽然您可以通过浏览器嗅探并选择不同的显示值，但间接隐藏行要容易得多。添加样式表规则，如：

.hidden { display: none; }

然后更改行元素的

className

，以包括或不包括

隐藏的
类。删除类后，
显示
样式将跳回其默认值，以当前浏览器上的值为准

您还可以使用包含选择器在一个元素中隐藏多个元素，然后通过更改一个类使它们同时可见/隐藏。这比单独更新每个
样式
要快

我有很多javascript处理要做，我不希望用户在处理过程中看到它

他们通常不会。更改通常不会在屏幕上显示，直到控件从代码传递回浏览器。
使用toggleClass在隐藏和显示TRs之间切换时，以下操作将起作用：

display:none;

及

例如

其中：

.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}

将值还原为默认值：
对您的案例使用可见性而不是显示

可见性：隐藏

后装

能见度：可见

了解更多信息
也许它不适用于任何地方，但…

使用具有所需显示的父元素（例如，
或其他内容），并将显示设置为显示时继承。像这样：


功能切换显示（）{
$（'#targetElement'）。toggleClass（'hide'）；
$（'#targetElement'）。toggleClass（'show'）；
}
#targetElement{
宽度：100px；
高度：100px；
背景色：红色；
}
.隐藏{
显示：无；
}
.表演{
显示：继承；
}

切换
我知道这是一个老问题，但仍然在这里搜索同一问题的答案

您可以设置非表格元素的显示，如下所示：

 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;

这与要创建的表元素一起工作。我在
元素中遇到了类似的问题，并通过
显示：表格标题组修复了它

我在Chrome、Firefox、Safari中测试了结果，结果正常

您可以在这里阅读更多内容：
我无法发表评论，这似乎适得其反。雷在上面的回答也解决了我的问题。我有一个javascript来隐藏搜索字符串与其中一个单元格的内容不匹配的表行

我使用的示例javascript代码对保持显示的行使用display=“block”（对要隐藏的行使用display=“none”）

我的搜索结果只显示了匹配的行，但丢失了表格式，因此所有TDs一起运行，而不是在列中格式化。因此，表以正确的列开始，但在搜索更改了显示属性后，就丢失了这些列

只需将display=“block”更改为display=”“即可解决此问题。
正确的方法是使用
display:none
属性指定
class
，然后在done@Nip在某些情况下，例如将
display:none
应用于元素的全局范围时，无法知道要恢复到哪个
显示值。在这些情况下，这个技巧非常有用。这个答案加上@Romhein的评论是完美的解决方案+这两个都是1…这对已经在这里的答案没有任何帮助，OP说
display:table row
不是一个选项。我使用它，似乎破坏了一切。这不起作用<代码>可见性
元素规则只是在视口中隐藏该元素。但是，由于正在渲染元素，因此元素的空间不会由后面的元素填充<代码>显示
规则设置为无，将不会在视口中渲染元素…这似乎比接受的解决方案更正确<代码>可见性：折叠可能优于
可见性：隐藏
。Mozilla在中注意到一些浏览器兼容性问题。如果您通过媒体查询在css中设置
display:none
，并希望将其重置，也可以使用此功能。
.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}

display: unset;

 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;