HTML表格中的隐藏单元格导致更大的行高

Question

因此，我有一个HTML表格，该表格可作为摘要表来显示需要显示的内容。 我只有4列显示，但大约有。 20，当前设置为display: none; 。 问题是那些隐藏的单元格导致行大于可见的行。 （我只会删除隐藏的单元格，但是以后的功能将要求用户需要使这些单元格/列可见）

问题 ：有没有一种方法可以使行的高度与可见行的高度一样高（仅此而已），并可以根据单元格/列的可见性变化进行调整？

当前的CSS：

table.grid {
    border-collapse: collapse;
}

table.grid tr td {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    white-space: nowrap;
    vertical-align: top;
}

table.grid tr td input {
    display: block;   
}

有了这个，我已经成功消除了单元格之间的水平空白，但是现在我需要消除垂直空间，而且我不确定如何克服这个小麻烦。

Answer 1

在隐藏的单元格上尝试一下。

.class{
  display:none;
  line-height:0;
}