如何隐藏表中的行（不显示：无） [英] How hide row in table (without display:none)

问题描述

我需要隐藏html表中的行。但我不能使用属性 display：none 。
原因 - 我们使用 tablesorter 插件与小部件 staticRow 和 scroller 并且当我们用 display：none 隐藏行时，我们在标题和表单元格中的宽度不正确。

I need to hide row in html table. But I can't use property display: none. Reason - we use tablesorter plugin with widgets staticRow and scroller and when we hide rows with display: none we have troubles with incorrect width in header and in table cells.

我们发现问题在于 display：none 。我们尝试使用多个属性中的set隐藏行

We discovered that problem is in display: none. We tried to use set from several properties for hiding rows

tr.hide, tr.hide td {
    visibility: hidden;
    height: 0;
    line-height: 0;
    font-size: 0;
    padding 0; 
}

但这一行仍然有高度，但仍然有）。

But this row still have height (not so big as in other cells in table, but still have).

我在 jsfiddle （第一个 - 类，我在上面添加，第二个 - display：none ），你可以看到差异。

I added 2 examples to jsfiddle (first - with class, which I add above, second - with display:none), you can see difference.

UPD：我添加了

box-sizing: border-box;

最终解决了我的问题，但仍然存在1-2个像素而不是空行。

And allmost solved my problem, but still exists 1-2 pixels instead of empty row.

UPD2： border-spacing：0 for table remove this extra spacing

UPD2: border-spacing: 0 for table remove this extra spacing

推荐答案

我不知道这是否是你想要的，但你可以为表添加属性cellpacing =0。使用css可以使用。

I am not sure if that's what you want, but you can add the attribute cellspacing="0" for the table. With css you can use.

#second_table { border-spacing:0;} 

这篇关于如何隐藏表中的行（不显示：无）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！