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

Posted 2023-03-05

【中文标题】如何隐藏 HTML 表格行 <tr> 使其不占用空间？

【英文标题】：How can I hide an HTML table row <tr> so that it takes up no space?

【发布时间】：2010-11-11 18:17:15

【问题描述】：

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

【问题讨论】：

它们是否被反复显示/隐藏？或者当它们被隐藏时，它们是否有效地消失了？因为您可以使用 javascript 来删除该行，它可能会解决您的问题。

我想将它们作为隐藏开始，然后在用户单击按钮以“显示更多”时显示它们。当它们被隐藏时，我不希望它们占用垂直空间。

我也遇到了同样的问题，如果你用 javascript 删除() 行，它仍然会在 IE6 中占用一些空间。没办法绕过糟糕的 IE

您使用的是什么文档类型？我接受这样一个简单的事实，即您以良好的代表在 SO 上发帖表明您可能知道的足够多，可以避免怪癖模式……但唯一愚蠢的问题是没有被问到的问题。 ...显然还有关于虎皮鹦鹉的。

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

【参考方案1】：

你能包含一些代码吗？我一直将style="display:none;" 添加到我的表格行中，它有效地隐藏了整行。

【讨论】：

为我工作。我试图设置可见性：隐藏之前:(

还有间距：/

如何防止在显示隐藏行时改变表格的宽度，我不想修复表格布局

【参考方案2】：

添加以下一些 line-height:0px;font-size:0px;height:0px;margin:0;padding:0;

我忘了是哪一个。我认为它是 IE6 的行高。

【参考方案3】：

如果display: none; 不起作用，那么设置height: 0; 怎么样？结合负边距（等于或大于顶部和底部边框的高度，如果有）来进一步删除元素？我不认为position: absolute; top: 0; left: -4000px; 会起作用，但可能值得一试。

就我而言，使用display: none 效果很好。

【参考方案4】：

我真的很想看看你的 TABLE 的样式。例如。 “边界折叠”

只是一个猜测，但它可能会影响“隐藏”行的呈现方式。

【参考方案5】：

这发生在我身上，我很困惑为什么。然后我注意到如果我删除了任何 nbsp;我在行内，然后行没有占用任何空间。

【参考方案6】：

我遇到了同样的问题，我什至在每个单元格中添加了 style="display: none"。

最后我使用了 HTML cmets <!-- [HTML] -->

【参考方案7】：

你可以设置<tr id="result_tr" style="display: none;">，然后用JavaScript显示回来：

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';

【讨论】：

酷！这就是我要找的:)

谢谢！！隐藏起来很容易，但将它们带回来是有问题的。

这改变了表格的宽度，我正在做一个过滤器，需要根据搜索框内的内容隐藏行

【参考方案8】：

您可以使用 style display:none 和 tr 来隐藏，它适用于所有浏览器。

【参考方案9】：

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

【讨论】：

fwiw 如果您想在某些特定情况下隐藏列，我认为这是一个很好的解决方案。另外添加opacity: 0

【参考方案10】：

你可以设置

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

【讨论】：

visibility: hidden; 元素仍会占用空间，这就是visibility 和display 属性之间的区别

这样使用<table><tr style="display: none;"><td></td></tr></table>

【参考方案11】：

var result_style = document.getElementById('result_tr').style;
result_style.display = '';

对我来说效果很好..

【参考方案12】：

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;

【参考方案13】：

您需要将输入类型更改为隐藏，它的所有功能都可以使用但在页面上不可见

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

只要输入类型设置为那个，你就可以改变其余的。 祝你好运！！

【参考方案14】：

我遇到了同样的问题，我解决了这个问题。 早期的 css 溢出：隐藏； z-index:999999;

我把它改成溢出：可见；

【参考方案15】：

我想我会添加一个潜在的其他解决方案：

<tr style='visibility:collapse'><td>stuff</td></tr>

我只在 Chrome 上测试过它，但把它放在 <tr> 上会隐藏行加上行内的所有单元格仍然会影响列的宽度。有时我会在表格底部添加一个额外的行，仅使用一些分隔符使某些列不能小于某个宽度，然后使用此方法隐藏该行。 （我知道你应该能够用其他 css 做到这一点，但我从来没有让它工作）

再说一次，我是在一个纯 chrome 环境中，所以我不知道它在其他浏览器中是如何工作的。

【讨论】：

这适用于大多数现代浏览器，除了 Safari，它呈现空白而不是隐藏行：developer.mozilla.org/en-US/docs/Web/CSS/visibility

这非常有效。它在隐藏行的同时保持列宽。 display: none 解决方案会更改列大小，从而导致不和谐的体验。谢谢！

在这里加入较晚，但值得一提的是，它帮助我有效地隐藏了一些给定的行，包括第一行，而不会影响由顶部的 rowspan 属性控制的表格布局。如果我使用 display:none，布局就搞砸了。