隐藏<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;),但是从其他SO问题中学到了这不起作用因为display: table-cell;.同样,设置line-height: 0;失败,但我认为它会因为我的一些列有块内容.

我也考虑过在<td>s 上明确设置宽度,但这会使表保持流畅(我必须在调整大小时删除显式宽度,这可能会导致宽度跳跃,除非所有行都可见,否则无法工作并包含在浏览器的表中调整大小计算).

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

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

Answer 1

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

17.5.5动态行和列效果

该visibility属性获取collapse行,行组,列和列组元素的值.此值导致整个行或列从显示中删除,并且行或列通常占用的空间可用于其他内容.剪切与折叠的列或行相交的跨区行和列的内容.但是,对行或列的抑制 不会影响表的布局.这允许动态效果删除表行或列,而不强制重新布置表,以便考虑列约束的潜在变化.

然而,似乎这在某些网络浏览器上存在问题.该MDN状态:

visibility:collapse在某些现代浏览器中,支持缺失或部分不正确.在许多情况下,可能无法正确处理visibility:hidden表行和列以外的元素.

不幸的是,它visibility: hidden在Chrome37上起作用:Demo Here.

但幸运的是,您可以通过line-height: 0声明伪造效果:

更新了演示

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