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