IE8 忽略 td 宽度，适用于 IE7

Posted 2023-03-06

【中文标题】IE8 忽略 td 宽度，适用于 IE7

【英文标题】：IE8 ignores td width, works on IE7

【发布时间】：2011-03-19 10:09:59

【问题描述】：

有一个表格是这样的：

<table >
<tr id="header">
 <td colspan="2"></td>
</tr>
<tr id="center">
 <td id="left" style="width: 201px"></td>
 <td id="mainpage" style="width: 100%"></td>
</tr>
</table>

在除 IE8 之外的所有浏览器（包括 IE7）中，“左”td 都可以。在 IE8 中，它超出了主页内容的宽度。

我会发布一些屏幕截图，但这是我在这里的第一篇文章。

有什么想法吗？

【问题讨论】：

你想如何使表格的总宽度为 201px + 100% ??

我没有。但是这个布局修复了 IE7 的问题。而且不影响IE8。

【参考方案1】：

第二列上的 width: 100% 看起来不正确 - 如果您试图将第二列扩展到可用空间的其余部分，则根本不需要它，因此您可以将其删除. 另外，将其添加到您的表中：

table-layout: fixed;

确保遵守宽度。

完整代码：

<table style="width: 100%; table-layout: fixed;">
<colgroup>
    <col style="width: 201px">
</colgroup>
<tr id="header">
    <td colspan="2"></td>
</tr>
<tr id="center">
    <td id="left"></td>
    <td id="mainpage"></td>
</tr>
</table>

【讨论】：

考虑过这个并试一试，但是一旦我将表格布局设置为固定，两列就会获得相同的宽度 (50%)，并且它会忽略固​​定值。第二列的 100% 用于修复 IE7。

请尝试添加了列的已编辑解决方案 - 不是一个非常酷的解决方案，但它可以工作。

确实如此！似乎比我的解决方案更好，我会去的。谢谢！

非常感谢...这解决了我的问题...那个 IE（叹气）

【参考方案2】：

好吧，通过在 mainpage 中添加一个具有固定宽度的空表，问题得到了一定程度的解决。

这样，我实际上是为不管 IE 的忽略态度设置了一个最小宽度。谢谢大家的回答。

【参考方案3】：

如果您为表格和第一个表格定义宽度，则无需为第二个表格定义它。

我猜第二个是 100% 从容器中获取的。

【参考方案4】：

你确定应该是100%

<table >

表格将与其父元素一样大。也许你应该为表格设置一个固定的宽度：

<table >

【讨论】：

表格位于适合整个屏幕的 div 中。