如何隐藏HTML表格行<tr>，使其不占用空间？

Question

如何隐藏HTML表格行<tr>，使其不占用空间？

htmlcsshtml-table

142

如何隐藏 HTML 表格行 <tr> 以便不占用空间？我有几个 <tr> 设置为 style="display:none;"，但它们仍会影响表格的大小和边框反映隐藏行。

- MikeN

2

它们是否被重复显示/隐藏？或者当它们被隐藏时，它们是彻底消失了吗？因为你可以使用JavaScript来删除行，这可能会解决你的问题。 - brettkelly

1

你使用哪种文档类型？我知道你在SO上发布帖子并且声望不低，这表明你可能已经足够了解如何避免怪异模式……但是唯一愚蠢的问题就是没有问出来的问题。……当然，还有那个关于虎皮鹦鹉的问题。 - David Thomas

1

我刚在FF 3.5和IE8中进行了测试 - 都使用display:none隐藏了该行。 - 17 of 26

请参考此链接以了解如何轻松实现显示和隐藏：链接 - Vijay Kumbhoje

1

我一直遇到很多问题，直到我意识到为了正确地将其“返回”，我必须使用style="display:table-row"。如果没有这个，它会隐藏，但下一行会尝试适应第一个单元格。或者像那样的一些奇怪的事情。 - Tim Erickson

显示剩余2条评论

16个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Skeletial · Answer 1

我遇到了完全相同的问题；我正在制作一个排行榜，可以通过按按钮显示不同难度的最高分数。

但是在折腾了将近2个小时之后，我发现了一些东西：

您可以使用此代码通过按钮按下隐藏（JavaScript）：

document.getElementById('mytr').style='display:none;';

通过按钮按下展示：

document.getElementById('mytr').style='display:table-row;';

开始隐藏（稍后通过按钮按下再显示）：

<tr id='mytr'style='display:none;'>

希望这有所帮助！

P.S. 您还可以以类似的方式显示和隐藏标题，只需将标题显示而不是编写'display:table-row;'，您可以编写'display:table-header;'。这也可以用于将行更改为标题和标题更改为行。

- user5431987 · Answer 2

你需要将输入类型更改为隐藏，它的所有功能都可以正常工作，但在页面上不可见。

<input type="hidden" name="" id="" value="">

只要输入类型设置正确，你就可以更改其余部分。祝你好运！

- alpc · Answer 3

HTML：

<input type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction</input>

JavaScript：

function updateMap() {
     map.setOptions({'styles': getStyles() });
} 

function getStyles() {
    var styles = [];
    for (var i=0; i < types.length; i++) {
      var style = {};
      var type = types[i];
      var enabled = document.getElementById(type).checked;
      style['featureType'] = 'poi.' + type;
      style['elementType'] = 'labels';
      style['stylers'] = [{'visibility' : (enabled ? 'on' : 'off') }];
      styles.push(style);
    }
    return styles;
}

- Ray Innov · Answer 4

我之前遇到了同样的问题，但是我解决了这个问题。之前的css代码是overflow:hidden; z-index:999999;

我将它改成了overflow:visible;

- Ramy Said · Answer 5

-5

您可以设置

<table>
  <tr style="visibility: hidden"></tr>
</table>

- Ramy Said

5

使用 visibility: hidden; 属性，元素仍然占据空间，这是 visibility 和 display 属性之间的区别。 - Dmitry Pashkevich

使用方式如下 <table><tr style="display: none;"><td></td></tr></table>。 - Sanu

- user2415617 · Answer 6

position: absolute会将元素从布局流中移除，并解决您的问题 - 元素仍将保留在DOM中，但不会影响其他元素。