如何在 table 中隐藏行（没有 display:none）

Question

我需要隐藏 html table 中的行。但是我不能使用属性 display: none。原因 - 我们将 tablesorter 插件与小部件 staticRow 和 scroller 一起使用，当我们使用 display: none 隐藏行时，我们会遇到 header 和 [= 中宽度不正确的问题40=] 个细胞。

我们发现问题出在 display: none。我们尝试使用来自多个属性的集合来隐藏行

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

但是这一行仍然有高度（不像 table 中的其他单元格那么大，但仍然有）。

我在 jsfiddle 中添加了 2 个示例（第一个 - 我在上面添加的 class，第二个 - display:none），你可以看到差异。

更新：我添加了

box-sizing: border-box;

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

UPD2：border-spacing: 0 for table 删除这个额外的间距

Answer 1

我不确定这是否是您想要的，但是您可以为 table 添加属性 cellspacing="0"。使用 css 你可以使用。

#second_table { border-spacing:0;}

如何在 table 中隐藏行（没有 display:none）

How hide row in table (without display:none)

html

css

html-table

tablerow