如何隐藏 HTML 表行 < tr > 以便不占用空间？

小开

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

小开

添加以下行高: 0px; font-size: 0px; height: 0px; 页边距: 0; 填充: 0;

我忘了是哪个了，我想是 IE6的行高。

小开

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

就我而言，使用 display: none工作得很好。

小开

最佳答案

我真的很想看看你的桌子的样式，例如“边界塌陷”

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

小开

这种情况发生在我身上，我对此感到困惑。然后我注意到，如果我删除任何 nbsp; ，我在行中有，那么行不占用任何空间。

小开

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

最后我使用了 HTML 注释 

小开

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

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

小开

您可以使用 style display: none 和 tr 来隐藏，它可以在所有浏览器中工作。

小开

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

小开

你可以设置

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

小开

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

对我非常有效。

小开

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

小开

你需要把变更的输入类型隐藏起来，它的所有功能都可以工作，但是它在页面上是不可见的

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

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

小开

我也有同样的问题，我解决了这个问题。早期的 css 是溢出: 隐藏; z-index: 999999;

我把它改成溢出: 可见;

小开

我觉得还有一个可能的解决办法:

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

我只在 Chrome 上测试过，但是把它放在 <tr>上隐藏了行 PLUS 行中的所有单元格仍然对列的宽度有贡献。我有时会在表的底部创建一个额外的行，使用一些间隔符，使得某些列不能小于某个宽度，然后使用这种方法隐藏行。(我知道你应该能够做到这一点与其他 css，但我从来没有得到工作)

同样，我在一个纯 Chrome 的环境中，所以我不知道这在其他浏览器中是如何工作的。

小开

我也遇到了同样的问题; 我正在做一个排行榜的东西，它可以通过按下按钮来显示不同难度的高分。

但是在我们鬼混了两个小时之后，我发现了一些事情:

您可以使用这段代码来隐藏按钮按下(JavaScript) :

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

按下按钮显示:

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

开始隐藏(以后带回按钮按下) :

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

希望这个有用！

附言。你也可以用类似的方式显示和隐藏标题，只显示标题而不是写 'display:table-row;'，你写 'display:table-header;'。这个还有可以用来将行更改为标题，将标题更改为行。