【问题标题】:IE8 ignores td width, works on IE7IE8 忽略 td 宽度,适用于 IE7
【发布时间】:2011-03-19 10:09:59
【问题描述】:

有一个表格是这样的:

<table width="100%">
<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。

标签: css internet-explorer-8 html-table width


【解决方案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 width="100%">
      

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

      <table width="600">
      

      【讨论】:

      • 表格位于适合整个屏幕的 div 中。
      猜你喜欢
      • 1970-01-01
      • 2012-03-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-09-07
      • 2019-08-13
      • 2012-07-09
      相关资源
      最近更新 更多