如何隐藏表中的行没有调整总宽度？(How to hide table rows without re

有没有一种方法来隐藏表中的行，而不会影响整个表格的宽度？ 我有一些JavaScript，显示/隐藏了一些表行，但是当行被设置为display: none; 与收缩表，以适应可见行的内容。

Answer 1:

如果你正在寻找保存表的总宽度，可以先检查它躲在一排，并明确宽度样式属性设置为这个值：

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中， table-layout: fixed; 你的表指示浏览兑现你的高度和宽度指定的大小。 这通常由浏览器抑制自动调整大小，除非你没有给任何提示，以你的行和列的首选大小。

Answer 4:

CSS规则visibility: collapse正是该设计。

tbody.collapsed > tr {
    visibility: collapse;
}

加入这个CSS后，你可以从JS与触发的知名度：

tbody.classList.toggle('collapsed');

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>

文章来源: How to hide table rows without resizing overall width?