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

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

作为参考，levik的解决方案非常有效。在我的例子中，使用jQuery，解决方案看起来像这样：

$('#tableId').width($('#tableId').width());

Answer 3

CSS规则 visibility：collapse 就是为此而设计的。

tbody.collapsed > tr {
    visibility: collapse;
}

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

tbody.classList.toggle('collapsed');

Answer 4

在CSS中，表格中的 table-layout：fixed; 指示浏览器遵守您为高度和宽度指定的尺寸。这通常会禁止浏览器自动调整大小，除非您没有提供有关行和列的首选大小的任何提示。

Answer 5

您可以使用纯HTML

来完成

<table border="1">
<colgroup>
    <col width="150px" />
    <col width="10px"  />
    <col width="220px" />
</colgroup>
<tr>
    <td valign="top">1</td>
    <td> </td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td> </td>
    <td>4</td>
</tr>
</table>