如何在表中隐藏行（不显示：无）

Posted 2021-05-04

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

我们发现问题出在display: none。我们尝试使用几个属性中的set来隐藏行

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

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

我在jsfiddle中添加了两个例子（第一个 - 我上面添加了类，第二个 - 使用display:none），你可以看到差异。

UPD：我补充道

box-sizing: border-box;

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

UPD2：表格的border-spacing: 0删除了这个额外的间距

答案

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

#second_table { border-spacing:0;}