如何隐藏 HTML 表格行
<tr> 以便不占用空间？我有几个 <tr> 设置为 style="display:none;"，但它们仍会影响表格的大小和边框反映隐藏行。16个回答
127
你能够包含一些代码吗？我总是给我的表格行添加style="display:none;"，这样可以有效地隐藏整行。
- Calvin
4
对我很有用。之前我一直在尝试设置visibility: hidden :( - Toadums
1仍然存在间距 :/ - fatuhoku
1如何防止在显示/隐藏行时更改表格的宽度，我不想使用固定表格布局。 - PirateApp
我忘记了样式...我只是写了display="none;"，然后感到困惑为什么它不起作用。 - I try so hard but I cry harder
75
您可以设置<tr id="result_tr" style="display: none;">，然后使用JavaScript将其显示：
var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';
- Jamshid Hashimi
3
5很棒！这正是我正在寻找的 :) - kmario23
4谢谢！躲起来很容易，但是把它们带回来却证明是有问题的。 - Jefferey Cave
这会改变表格的宽度，我正在进行一个筛选器，根据搜索框内的内容显示隐藏行。 - PirateApp
43
我很想看到你的表格样式，例如 "border-collapse"。
只是猜测，但它可能会影响如何呈现“隐藏”行。
- o.k.w
42
我觉得可以提供另一种可能的解决方案：
<tr style='visibility:collapse'><td>内容</td></tr>
我只在Chrome上测试过，将此代码放在<tr>上可以隐藏该行，而所有单元格仍然会对列宽产生影响。有时候我会在表格底部增加一排只包含一些占位符的额外行，以便使某些列的宽度不能小于某个值，然后使用这种方法隐藏该行。（我知道你应该能够使用其他css实现，但我从未做到过）
同样，我在纯粹的Chrome环境中，所以我不知道这在其他浏览器中的功能如何。
- rgbflawed
5
1这在大多数现代浏览器中都可以工作，但 Safari 是一个值得注意的例外，它会呈现空格而不是隐藏行：https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility - Oscar Scholten
1这个方案非常完美。它在隐藏行时保持了列宽。而
display: none的解决方案则会改变列宽，导致使用体验变得令人不舒服。谢谢！ - k2snowman691虽然我来晚了，但还是值得一说的是，它帮助我有效地隐藏了一些给定的行，包括第一行，而不影响由顶部 rowspan 属性规定的表格布局。如果使用 display:none，布局会被搞砸。 - Diego D
这是我能找到的唯一解决方案，可以隐藏行而不改变列宽。我应该补充说明，我有嵌套/缩进的行可以折叠（隐藏）。 - Ewan
谢谢您提供的解决方案！我一直在尝试构建一个表格，并且喜欢将唯一表格的列的宽度样式信息保留在
thead中以便于阅读。但是，我正在处理的表格没有顶部标题行的语义原因。使用此方法隐藏行的样式不会像display: none;那样被忽略。 - Sigmatic9
如果
display: none;不起作用，那么设置height: 0;如何？再加上一个负边距（等于或大于顶部和底部边框的高度，如果有的话）来进一步删除该元素？我想position: absolute; top: 0; left: -4000px; 不会起作用，但值得一试。就我而言，使用 display:none 是可以的。- David Thomas
1
我曾经考虑过这个问题。但是，要在
tr元素上使用height属性，仍然需要将display类型从默认值更改为类似于block的其他值。 - Ewan5
var result_style = document.getElementById('result_tr').style;
result_style.display = '';
对我来说运行完美。
- Vignesh
5
您可以使用style display:none以及tr标签来隐藏内容，这样做可以兼容所有浏览器。
- SS Sid
4
添加以下一些样式：line-height:0px;font-size:0px;height:0px;margin:0;padding:0;
我忘记哪个属性会产生这种效果。我想在IE6中是line-height属性。
- s_hewitt
4
我遇到了同样的问题，我甚至给每个单元格添加了style="display: none"。最后我使用了HTML注释
<!-- [HTML] -->。- Simon Hughes
2
这种情况曾经发生在我身上，我很困惑为什么会这样。后来我注意到，如果我删除了行内的任何 符号，那么这些行就不会占用任何空间。
- Kevin H
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
style="display:table-row"。如果没有这个，它会隐藏，但下一行会尝试适应第一个单元格。或者像那样的一些奇怪的事情。 - Tim Erickson