Question

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

Answer 1

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

Answer 2

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

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

Answer 3

我真的很想看看你的TABLE造型。例如。 “边界崩溃”

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

Answer 4

如果display: none;不起作用，那么如何设置height: 0;呢？与负边距（等于或大于顶部和底部边界的高度，如果有的话）一起进一步去除元素？我不认为position: absolute; top: 0; left: -4000px;会起作用，但值得一试。

就我而言，使用display: none可以正常工作。

Answer 5

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

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

我仅在Chrome上对其进行了测试，但将其放在<tr>上则隐藏了该行，加上该行内的所有单元格仍然对列的宽度有所贡献。有时，我会在表的底部增加一个额外的行，其中仅带有一些使其成为空白的间隔符，以使某些列的宽度不能小于某个宽度，然后使用此方法隐藏该行。（我知道您应该能够与其他CSS一起执行此操作，但我从未使它起作用）

同样，我处于纯Chrome环境中，所以我不知道它在其他浏览器中如何工作。

Answer 6

添加以下一些行高：0px; font-size：0px; height：0px; margin：0; padding：0;

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

Answer 7

我遇到了同样的问题，我甚至为每个单元格添加了style =“display：none”。

最后我使用了HTML评论 

Answer 8

您可以使用样式显示：none和tr来隐藏它，它将适用于所有浏览器。

Answer 9

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

Answer 10

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

对我来说很完美..

Answer 11

您需要将更改输入类型设置为隐藏，其所有功能都有效，但在页面上不可见

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

只要输入类型设置为您可以更改其余类型。祝你好运!!

Answer 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;
}

Answer 13

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

我将其更改为溢出：可见;

Answer 14

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

Answer 15

您可以设置

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

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

15 个答案: