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;
}