我有一个表,其中的空白设置为nowrap,而列宽使用表布局固定来限制。这样可以正确地在Firefox中隐藏长行,但是在IE9中行会自动换行。
测试用例:
<table border="1" width=200 style="white-space: nowrap; table-layout: fixed;">
<tr>
<td style="overflow: hidden;" width=150>Word with some spaces that isnt working in IE</td>
<td width=50>100/50</td>
</tr>
<tr>
<td style="overflow: hidden;" width=150>LoooooooooOOOOOOOOOoooooooooooooooooongword</td>
<td width=50>550/50</td>
</tr>
<tr>
<td style="overflow: hidden;" width=150>AnotherLoooooooooooonnnnnnnnnnnnnnnnGWord</td>
<td width=50>660/50</td>
</tr>
</table>
Firefox:
IE 9:
最佳答案
使用在我的IE9中可以使用的strict doctype,我得到的结果与firefox中的结果相同。我已经用代码测试过
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<form>
<table border="1" width=200 style="white-space: nowrap; table-layout: fixed;">
<tr>
<td style="overflow: hidden;" width=150>Word with some spaces that isnt working in IE</td>
<td width=50>100/50</td>
</tr>
<tr>
<td style="overflow: hidden;" width=150>LoooooooooOOOOOOOOOoooooooooooooooooongword</td>
<td width=50>550/50</td>
</tr>
<tr>
<td style="overflow: hidden;" width=150>AnotherLoooooooooooonnnnnnnnnnnnnnnnGWord</td>
<td width=50>660/50</td>
</tr>
</table>
</form>
</body>
</html>