Question

基本上，我有一张桌子。 Onload，我将表的每一行设置为display:none，因为我有很多javascript处理要完成，我不希望用户在完成时看到它。我设置了一个计时器，以便在一段时间后显示它，我的问题是我无法让表格行显示为表格行。如果我设置display:block，它就不会与标题（th）对齐。我发现的唯一解决方案是来自css2的display: table-row，但是7及以下不支持此声明。

任何解决方案？

Answer 1

将display设置为空字符串 - 这将允许该行使用其默认显示值，因此适用于所有浏览器

Answer 2

IE7及以下版本对表格元素使用display: block;其他浏览器正确使用table-row，table-cell等。

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

.hidden { display: none; }

然后更改行元素的className以包含或不包含hidden类。删除该类后，display样式将跳回其默认值，即当前浏览器中的默认值。

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

我有很多javascript处理要完成，我不希望用户在完成时看到它。

他们一般都不会。在控件从您的代码传递回浏览器之前，更改通常不会在屏幕上呈现。

Answer 3

将值恢复为默认值：

display: unset;

Answer 4

为您的案例使用可见性而不是显示。

可见性：隐藏;

加载后

可见性：可见;

了解更多here

Answer 5

为什么不将表格放入div中，将div显示为none，处理完成后，将div的显示设置回block或inline block或无论你需要什么......

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/

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>

Answer 8

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

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

我的搜索结果只显示了匹配的行，但丢失了表格式，因此所有TD一起运行，而不是按列格式化。因此，该表从正确的列开始，但在搜索更改display属性后立即丢失了它们。

只需将display =“ block”更改为display =“”即可解决。

Answer 9

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

display:none;

和

display: table-row;

E.g。

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

其中：

.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}

如何在显示后恢复正常：没有表行

9 个答案:

将值恢复为默认值：