html – 隐藏a,同时仍然涉及宽度计算

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

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

实际的表包含更多的数据(包括列和行),并且是流体宽度.由于数据是可变的,我希望表格布局保持自动,因为它处理自动调整(对于1000行,在javascript中这将是昂贵和复杂的).

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

是否可以隐藏< tr>从视图,但仍然包括在列宽度计算完成(例如,调整大小,由浏览器)在表格布局：auto;？

我试过设置高度：0; (和max-height：0;),但是从other SO questions学到了这不起作用,因为display：table-cell;.同样,设置行高：0;失败了,但我想它会因为我的一些列有阻止内容.

我还考虑在< td> s上明确设置宽度,但这会使表保持流畅(我必须在调整大小时删除显式宽度,这可能会导致宽度跳跃,并且除非全部行是可见的,并包含在浏览器的表调整大小计算中).

编辑：为了澄清,通过隐藏视图我的意思是隐藏在显示的意义上：none;,not visibility：hidden;.如果元素在隐藏时不保留原始高度,后者将起作用,但不幸的是情况并非如此.

注意：我知道乍一看这似乎是一个非常狭隘的问题,但我相信这可能是一个常见的用例.因此,我加粗了问题中最适用的部分(阅读：最重要).其余的(对我来说稍微具体)比其他任何东西更具说明性.

解决方法

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

07001

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.

然而,似乎这在某些Web浏览器上存在问题. 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 */
}