Jos*_*ola 55 html css html-table
我有一些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>
Rus*_*Cam 97
需要在单元格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中测试过
小智 22
通常,如果您使用white-space: nowrap;它可能是因为您知道哪些列将包含包装(或拉伸单元格)的内容.对于这些列,我通常将单元格的内容包装在span具有特定class属性的a中并应用特定的属性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支持.;)