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

How can I hide an HTML table row <tr> so that it takes up no space?

提问by MikeN

How can I hide an HTML table row <tr>so that it takes up no space? I have several <tr>'s set to style="display:none;", but they still affect the size of the table and the table's border reflects the hidden rows.

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

采纳答案by o.k.w

I would really like to see your TABLE's styling. E.g. "border-collapse"

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

Just a guess, but it might affect how 'hidden' rows are being rendered.

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

回答by Calvin

Can you include some code? I add style="display:none;"to my table rows all the time and it effectively hides the entire row.

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

回答by Jamshid Hashimi

You can set <tr id="result_tr" style="display: none;">and then show it back with JavaScript:

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

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

回答by rgbflawed

Thought I'd add to this a potential other solution:

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

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

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

I've only tested it on Chrome but putting this on the <tr>hides the row PLUS all the cells inside the row still contribute to the widths of the columns. I will sometimes make an extra row at the bottom of a table with just some spacers that make it so certain columns can't be less than a certain width, then hide the row using this method. (I know you're supposed to be able to do this with other css but I've never gotten that to work)

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

Again, I'm in a purely chrome environment so I have no idea how this functions in other browsers.

同样，我处于纯 chrome 环境中，所以我不知道它在其他浏览器中的功能。

回答by David says reinstate Monica

If display: none;doesn't work, how about setting height: 0;instead? In conjunction with a negative margin (equal to, or greater than, the height of the top and bottom borders, if any) to further remove the element? I don't imagine that position: absolute; top: 0; left: -4000px;would work, but it might be worth a try.

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

For my part, using display: noneworks fine.

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

回答by Simon Hughes

I was having the same issue, I even added style="display: none" to each cell.

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

In the end I used HTML comments <!-- [HTML] -->

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

回答by s_hewitt

Add some of the following line-height:0px;font-size:0px;height:0px;margin:0;padding:0;

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

I forget which one does it. I think it's line-height for IE6.

我忘记是哪个做的了。我认为这是 IE6 的行高。

回答by Shahid Siddique

You can use style display:none with tr to hide and it will work with all browsers.

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

回答by Vignesh

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

is working perfectly for me..

非常适合我..

回答by Kevin H

This happened to me and I was baffled as to why. Then I noticed that if i removed any nbsp; i had within the rows, then the rows didn't take up any space.

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