Colspan 不适用于 <td> 宽度设置？ (IE7)答案

【问题标题】：Colspan doesn't work with <td> width set? (IE7)Colspan 不适用于 <td> 宽度设置？ (IE7)
【发布时间】：2013-02-12 00:36:29
【问题描述】：

当我使用固定宽度 (IE 7) 时，我无法让 colspan 工作？为什么？！

示例代码：

<html>
  <head>
    <style>
    .inputGroup td
    { width:250px; }    
    </style>
  </head>
<body>
<table class="inputGroup">
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
  <tr>
    <td colspan="2">This should span two columns but it doesnt</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
</table>
</body>
</html>

帮助任何人？ :(

【问题讨论】：

标签： html html-table

【解决方案1】：

确实如此，但您限制了宽度。如果需要，请尝试创建另一个名为 '.doubleSpanInputGroup' 的类或宽度为 500 的类，并将该类设置到跨越列上。

例如。

<html>
  <head>
    <style>
    .inputGroup td
    { width:250px; }   
    .inputGroup td.doubleInputGroup
    { width:500px; } 
    </style>
  </head>
<body>
<table class="inputGroup">
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
  <tr>
    <td colspan="2" class="doubleInputGroup">This should span two columns but it doesnt</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
</table>
</body>
</html>

编辑：使新样式更具层次感

【讨论】：

哇哦。谢谢，有时您只是看不到眼前的事物。
是的，没有问题，容易出错。请确保你使用我上面的修改版本，因为第一遍有一个小问题:) woops.

【解决方案2】：

尝试将规则应用于tr 而不是td，并将宽度设为 500px，如下所示：

.inputGroup tr { width: 500px; }

您遇到的问题是因为您已将 td 的宽度限制为最多 250 像素，因此浏览器只是按照您的说明进行操作。

【讨论】：

【解决方案3】：

一般方式：

table tr:first-child td:first-child{ width:86px; }

如果这是唯一的宽度，那么所有第一列都采用这个宽度，并且 ie7 中的 colspan 将起作用

【讨论】：

【解决方案4】：

我尝试将 colspan 单元格的宽度设置为自动，在 IE7/8/9 中似乎可以正常工作

.yourColSpanTD { width: auto !important; }

【讨论】：