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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
