html - 为什么HTML表在IE中这样显示？

为什么在IE中设置固定宽度的情况下第一列宽度太大？

我的代码：

<!DOCTYPE html>
<html >
<head>
    <title>Test</title>
</head>
<body>
<table  width="100%" border="1">
<tr>
    <td style="width:180px;"> 2 </td>
    <td>6 </td>
</tr>
<tr>
    <td colspan="2" >
            lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk        lskdjf lskfj lskjf lksfj lksf lksd flksflksfj lskf jlksf jlk
    </td>
</tr>
</table>
</body>
</html>

输出：

第一列太大，我将第一列的宽度设置为180px

<td style="width:180px;">

最佳答案

本地Internet Explorer模式“修复”

我只能通过将IE的文档模式更改为IE5怪癖来重现此问题，所以我只能假设这就是您将IE设置为的功能。默认情况下，无论您使用哪种版本，JSFiddle均应以标准模式加载。

要解决此问题，只需按键盘上的F12打开IE的开发人员工具，然后在出现的UI顶部栏上选择“文档模式”，并将其更改为“标准（页面默认）”：

IE5 Quirks模式CSS修复

另外，您只需在表中使用固定的table-layout即可在IE5怪癖模式下解决此问题。在您的CSS中，只需添加：

table {
    table-layout:fixed;
}

这是一个updated JSFiddle demo。