html - 隐藏一个 ，同时仍然将它包含在宽度计算中

Question

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

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

实际表格包含更多数据(包括列和行)并且宽度不固定。由于数据是可变的，我想要 table-layout留下来auto ，因为它处理自动调整大小(如果在 javascript 中处理 1,000 行，这将是昂贵且复杂的)。

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

是否可以隐藏 <tr>从 View 中，但仍将其包含在浏览器在带有 table-layout: auto; 的表格上完成的列宽计算中(例如，在调整大小时) ?

我试过设置 height: 0; (和 max-height: 0; )，但从 other SO questions 中学到了这不起作用，因为 display: table-cell; .同样，设置line-height: 0;失败了，但我认为它会因为我的一些专栏有 block 内容。

我还考虑过在 <td> 上明确设置宽度s，但这使得表格保持流畅(我将不得不删除调整大小时的显式宽度，这可能会导致宽度跳跃，并且除非所有行都可见并包含在浏览器的表格调整大小计算中，否则不会起作用)。

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

注意:我知道乍一看这似乎是一个适用范围很窄的问题，但我相信这可能是一个常见的用例。因此，我将问题中最适用的部分(阅读:最重要的部分)加粗了。其余部分(对我而言略微具体)比其他任何内容都更具解释性。

Answer 1

如果我没理解错的话，您正在寻找 visibility: collapse;声明:

17.5.5 Dynamic row and column effects

The visibility property takes the value collapse for row, row group, column, and column group elements. This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. Contents of spanned rows and columns that intersect the collapsed column or row are clipped. The suppression of the row or column, however, does not otherwise affect the layout of the table. This allows dynamic effects to remove table rows or columns without forcing a re-layout of the table in order to account for the potential change in column constraints.

然而，这在某些网络浏览器上似乎是错误的。 MDN states :

The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

不幸的是，它在 Chrome37 上充当 可见性:隐藏: 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 */
}