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

Question

有没有办法在不影响整个表格宽度的情况下隐藏表格行？我有一些 javascript 可以显示/隐藏一些表格行，但是当这些行设置为 display: none; 时，表格会缩小以适应可见行的内容。

Answer 1

如果您希望保留表格的整体宽度，您可以在隐藏行之前检查它，并将宽度样式属性显式设置为此值:

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

但是，当您隐藏该行时，这可能会导致各个列重排。缓解这种情况的一种可能方法是向表格添加样式:

 table {
  table-layout: fixed;
 }