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

【问题标题】：How to hide table rows without resizing overall width?如何在不调整整体宽度的情况下隐藏表格行？
【发布时间】：2010-09-13 21:59:29
【问题描述】：

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

【问题讨论】：

标签： javascript html css xhtml html-table

【解决方案1】：

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

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

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

 table {
  table-layout: fixed;
 }

【讨论】：

...直到您调整窗口大小，表格的固定宽度不再重排，因为它现在是固定像素宽度...
我使用表格布局：固定；我的问题就消失了：D

【解决方案2】：

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

tbody.collapsed > tr {
    visibility: collapse;
}

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

tbody.classList.toggle('collapsed');

【讨论】：

这对我来说绝对是最好的答案。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

在 CSS 中，表格上的 table-layout: fixed; 指示浏览器遵循您为高度和宽度指定的尺寸。这通常会抑制浏览器自动调整大小，除非您没有给出任何关于行和列的首选大小的提示。

【讨论】：

【解决方案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>

【讨论】：