如何在将表格行设置为display:none之后恢复正常显示？

Question

基本上，我有一个表格。 在加载时，我将表格的每一行设置为display:none，因为我有很多JavaScript处理需要完成，而我不希望用户在处理时看到它。 我设置了一个计时器，在一段时间后显示它，但我的问题是我无法使表格行像表格行一样显示。 如果我设置display:block，它只会与标题（th）不对齐。 我找到的唯一解决方案是来自css2的display:table-row，但ie 7及以下版本不支持此声明。

有什么解决办法吗？

- FurtiveFelon

Answer 1

将显示设置为空字符串 - 这将允许该行使用其默认的显示值，从而在所有浏览器中都能正常工作。

- Ray

---

正确的做法是给一个具有display: none属性的class，完成后再删除该class名称。 - Romhein

@Nip 在某些情况下，例如在对全局范围内的元素应用 display:none 时，无法知道要恢复哪个 display 值。在这种情况下，这个提示非常有用。 - Christophe Marois

这个答案连同@Romhein的评论一起，构成了完美的解决方案！给两位点赞... - Romeo Sierra

Answer 2

IE7及以下版本使用display: block来显示表格元素；而其它浏览器则正确地使用table-row、table-cell等。

虽然你可以使用浏览器嗅探并选择不同的显示值，但是间接隐藏一行更容易。可以添加一个样式表规则，例如：

.hidden { display: none; }

然后更改行元素的className，以包含或不包含hidden类。当该类被移除时，display样式将跳回其默认值，无论当前浏览器上是什么。

您还可以使用包含选择器来隐藏一个元素中的多个元素，然后通过更改一个类使它们全部可见/隐藏。这比分别更新每个style要快。

我有很多需要处理的JavaScript，并且我不希望用户在处理过程中看到它。

通常他们也不会看到。更改通常直到控制权从您的代码返回到浏览器后才会呈现在屏幕上。

- bobince

---

如果你在媒体查询中通过CSS设置display:none，并希望重置它，则此方法同样适用。 - serv-inc

Answer 3

将值恢复为默认值：

display: unset;

- Sheharyar

---

我使用这个似乎把一切都搞砸了。 - Apit John Ismail

这样是行不通的！visibility规则只会将元素从视口中隐藏，但由于该元素正在被渲染，因此该元素的空间不会被后续元素填充。而将display规则设置为none，则不会在视口上呈现该元素... - Romeo Sierra

对我有用，以恢复（display: none）效果。非常感谢你。 - undefined

Answer 4

对于您的情况，请使用visibility而不是display。

visibility: hidden;

加载后

visibility: visible;

了解更多信息，请点击这里

- Apit John Ismail

---

这个看起来比被接受的解决方案更正确。visibility: collapse 可能比 visibility:hidden 更可取。Mozilla 在 https://developer.mozilla.org/en-US/docs/Web/CSS/visibility 中指出了一些浏览器兼容性问题。 - Theophilus

Answer 5

为什么不把表格放在一个 div 中，将该 div 的显示设置为 none，当处理完成后，将 div 的显示设置回 block 或 inline block 或其他你需要的样式...

- tomsseisums

Answer 6

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

您可以像这样设置非表元素的显示：

 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/

- Szekelygobe

Answer 7

也许并非适用于所有情况，但是可以使用一个父元素（例如<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>

- Rzassar

Answer 8

我无法发表评论，这似乎是适得其反的。上面Ray的回答也解决了我的问题。我有一个javascript来隐藏表格行，其中搜索字符串与其中一个单元格的内容不匹配。

我使用的示例javascript代码对于保持显示的行具有display = "block"（对于要隐藏的行具有display = "none"）。

我的搜索结果只显示匹配的行，但失去了表格格式，因此所有TD都连在一起而不是按列格式化。因此，表格从正确的列开始，但一旦搜索更改了display属性，就会失去它们。

将display = "block"简单地更改为display = ""即可解决问题。

- Brent Butler

Answer 9

当使用toggleClass在隐藏和显示TR之间切换时，以下代码将起作用：

display:none;

并且

display: table-row;

例如：

$('#the_tr_id').toggleClass('tr_show','tr_hide');

在哪里：

.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}

- AnotherOther

---

这对已有的答案没有任何帮助，并且OP说display:table-row不是一个选项。 - Bobo