如何在不调整整体宽度的情况下隐藏表格行？

Question

有没有办法隐藏表行而不影响整个表宽度？我有一些javascript显示/隐藏了一些表行,但是当行设置display: none;为时,表会缩小以适合可见行的内容.

Answer 1

如果要保留表的整体宽度,可以在隐藏行之前进行检查,并将width style属性显式设置为此值:

table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";

但是,当您隐藏行时,这可能会导致各列重排.缓解此问题的一种可能方法是向表中添加样式:

 table {
  table-layout: fixed;
 }

Answer 2

CSS 规则visibility: collapse正是为此而设计的。

tbody.collapsed > tr {
    visibility: collapse;
}

添加此 CSS 后，您可以通过以下方式触发 JS 的可见性：

tbody.classList.toggle('collapsed');