我有一些html表,文本数据太大,不适合.因此,它会垂直扩展单元格以适应这种情况.因此,现在具有溢出的行的高度是具有较少数据量的行的两倍.这是无法接受的.如何强制表具有相同的行高1em？
这是一些重现问题的标记.表应该只是一行的高度,隐藏溢出的文本.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { width:250px; }
table tr { height:1em; overflow:hidden; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is a test.</td>
<td>Do you see what I mean?</td>
<td>I hate this overflow.</td>
</tr>
</table>
</body>
</html>
搜索结果存储在如下表格中:
<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;.如果元素在隐藏时不保留原始高度,后者将起作用,但不幸的是情况并非如此.
注意:我知道乍一看这似乎是一个非常狭隘的问题,但我相信这可能是一个常见的用例.因此,我加粗了问题中最适用的部分(阅读:最重要).其余的(对我来说稍微具体)比其他任何东西更具说明性.