搜索结果存储在如下表格中:
<table>
<tbody>
<tr>
<td>Column One</td>
<td>Column Two</td>
<td>Column Three</td>
</tr>
</tbody>
</table>
Run Code Online (Sandbox Code Playgroud)
实际的表包含更多的数据(包括列和行),并且是流体宽度.由于数据是可变的,我希望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;.如果元素在隐藏时不保留原始高度,后者将起作用,但不幸的是情况并非如此.
注意:我知道乍一看这似乎是一个非常狭隘的问题,但我相信这可能是一个常见的用例.因此,我加粗了问题中最适用的部分(阅读:最重要).其余的(对我来说稍微具体)比其他任何东西更具说明性.
在CSS flexible框布局模块中,它说:
折叠的弹性项目完全从渲染中删除,但留下了"支柱"
这表现得像visibility: hidden吗?如果答案是肯定的,那么为什么要visibility: collapse介绍?