如何隐藏表格行溢出? [英] How to hide Table Row Overflow?
问题描述
我有一些 html 表格，其中的文本数据太大而无法容纳.因此，它会垂直扩展单元格以适应此情况.所以现在有溢出的行是数据量较小的行的两倍高.这是无法接受的.如何强制表格具有与 1em 相同的行高?
I have some html tables where the textual data is too large to fit. So, it expands the cell vertically to accommodate for this. So now rows that have the overflow are twice as tall as rows with smaller amounts of data. This is unacceptable. How can I force table to have the same row height of 1em?
这是一些重现问题的标记.表格应该只有一行的高度，并隐藏溢出的文本.
Here is some markup that reproduces the problem. Table should only be the height of one line, with the overflowing text hidden.
<!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 on table 和 white-space:nowrap; 在单元格上.您还需要将 overflow:hidden; 也移动到单元格中
Need to specify two attributes, table-layout:fixed on table and white-space:nowrap; on the cells. You also need to move the overflow:hidden; to the cells too
table { width:250px;table-layout:fixed; }
table tr { height:1em; }
td { overflow:hidden;white-space:nowrap; }
这是一个演示.在 Firefox 3.5.3 和 IE 7 中测试
Here's a Demo . Tested in Firefox 3.5.3 and IE 7
这篇关于如何隐藏表格行溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
