如何隐藏表格行溢出？
我有一些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-layout:fixed在table和white-space:nowrap; 在细胞上。 您还需要移动overflow:hidden; 到细胞也是如此
table { width:250px;table-layout:fixed; }
table tr { height:1em; }
td { overflow:hidden;white-space:nowrap; }
这是一个演示 。 测试Firefox 3.5.3和IE 7
一般来说，如果你使用white-space: nowrap; 这可能是因为你知道哪些列将包含包装（或拉伸单元格）的内容。 对于这些列，我一般包裹单元格的内容在span与特定的class属性和应用特定width 。
例：
HTML ：
<td><span class="description">My really long description</span></td>
CSS ：
span.description {
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 150px;
}
在大多数现代浏览器中，您现在可以指定：
<table>
<colgroup>
<col width="100px" />
<col width="200px" />
<col width="145px" />
</colgroup>
<thead>
<tr>
<th>My 100px header</th>
<th>My 200px header</th>
<th>My 145px header</th>
</tr>
</thead>
<tbody>
<td>100px is all you get - anything more hides due to overflow.</td>
<td>200px is all you get - anything more hides due to overflow.</td>
<td>100px is all you get - anything more hides due to overflow.</td>
</tbody>
</table>
然后，如果您应用上述帖子中的样式，如下所示：
table {
table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
overflow: hidden;
white-space: nowrap;
}
结果在整个表格中给你很好的隐藏溢出。 适用于最新的Chrome，Safari，Firefox和IE。 我在9之前没有在IE中进行过测试 - 但我的猜测是它可以回到7，甚至可能有足够的幸运看到5.5或6的支持。 ;）
链接地址: http://www.djcxy.com/p/87493.html