隐藏一个 <tr>，同时仍然涉及它的宽度计算

Question

搜索结果存储在如下表中：

<table>
    <tbody>
        <tr>
            <td>Column One</td>
            <td>Column Two</td>
            <td>Column Three</td>
        </tr>
    </tbody>
</table>

实际的表格包含更多的数据（列和行）并且是流动的宽度。由于数据是可变的，我希望table-layout 保持auto，因为它处理自动调整大小（这在javascript 中对于1000 行来说会很昂贵且复杂）。

此表还由实时搜索小部件过滤，该小部件通过添加 display: none; 隐藏与查询不匹配的行。但是，我发现这通常会导致重新计算列宽（通常会导致列宽出现一些不和谐的跳跃）。这是有道理的，因为行可能只包含有display: table-row; 的计算。但这不是我所追求的行为。

是否可以从视图中隐藏<tr>，但仍将其包含在由浏览器在具有table-layout: auto; 的表格上完成的列宽计算中（例如调整大小）？

我尝试过设置height: 0;（和max-height: 0;），但从other SO questions 了解到这不起作用，因为display: table-cell;。同样，设置line-height: 0; 失败，但我认为会失败，因为我的一些列有块内容。

我还考虑过在<td>s 上显式设置宽度，但这会使表格保持流畅（我必须在调整大小时删除显式宽度，这可能会导致宽度跳跃，除非所有行都是可见的，并包含在浏览器的表格调整大小计算中）。

编辑：澄清一下，从视图中隐藏是指隐藏在display: none; 的意义上，而不是visibility: hidden;。如果元素在隐藏时没有保留其原始高度，则后者会起作用，但不幸的是，情况并非如此。

注意：我知道乍一看这似乎是一个非常适用的问题，但我相信这可能是一个常见的用例。因此，我将问题中最适用的部分（阅读：最重要）加粗。其余部分（对我来说有点特殊）比其他任何东西都更具解释性。

Answer 1

如果我理解正确，您正在寻找visibility: collapse; 声明：

17.5.5 Dynamic row and column effects

visibility 属性采用值 collapse 表示行，行 组、列和列组元素。这个值会导致整个 要从显示中删除的行或列，以及正常的空间 由要用于其他内容的行或列占用。 与折叠的相交的跨行和列的内容 列或行被剪裁。行或列的抑制， 但是，不会影响表格的布局。这 允许动态效果删除表格行或列而不强制 重新布局表格以考虑潜在的变化 在列约束中。

但是，这在某些网络浏览器上似乎存在问题。 MDN states：

对visibility:collapse 的支持缺失或部分不正确 在一些现代浏览器中。在许多情况下，它可能没有得到正确处理 像 visibility:hidden 在表格行和列以外的元素上。

不幸的是，它在 Chrome37 上充当 visibility: hidden：Demo Here。

但幸运的是，你可以通过line-height: 0声明来伪造效果：

Updated Demo

.hidden {
  visibility: collapse;
  line-height: 0; /* Set the height of the line box to 0
                     in order to remove the occupied space */
}

Answer 2

使用 CSS：

tr {
    visibility: hidden;
}