IE9.0 和 colgroup / colspam 问题答案

【问题标题】：IE9.0 and colgroup / colspam issueIE9.0 和 colgroup / colspam 问题
【发布时间】：2012-11-23 01:45:49
【问题描述】：

IE 9.0 无法正确呈现以下 HTML，我没有想法...... 请帮忙。 我无法更改“”。有什么想法吗？ 谢谢。

<!DOCTYPE html>
<html lang="en">
<body>
<table style="table-layout:fixed;" width="100%" border="1">
    <colgroup span="120">
    </colgroup>
    <tbody>
        <tr>
            <td colspan="120">AAAAAAAAAAAAAAAAAAAAAA</td>
        </tr>
        <tr>
            <td colspan="15">aa</td>
            <td colspan="15">ss</td>
            <td colspan="90">dd</td>
        </tr>
        <tr>
            <td colspan="120">zzzzzzzz</td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： html internet-explorer

【解决方案1】：

Colspan = 组合成单个单元格的列数。我害怕你用它来设置列的宽度。这是错误的。使用 CSS width 属性设置列的宽度。

<td width="120" colspan="3">

（那是纯 HTML）或 CSS

<td style="width:120px" colspan="3">

【讨论】：

【解决方案2】：

标记违反了 HTML 表格模式，正如 W3C Markup Validator 会告诉你的那样，它有点神秘。 colspan 属性指定单元格跨越的表列数。只有 3 列时，不能跨越 120 列。

在我看来，您真正想要的是划分列之间的可用宽度，以便关系为 15 : 15 : 90。将其简化为 1 : 1 : 6，然后将它们转换为百分比：

<table style="table-layout:fixed;" width="100%" border="1">
     <col width="12.5%">
     <col width="12.5%">
     <col width="75%">
    <tbody>
        <tr>
            <td colspan="3">AAAAAAAAAAAAAAAAAAAAAA</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>ss</td>
            <td>dd</td>
        </tr>
        <tr>
            <td colspan="3">zzzzzzzz</td>
        </tr>
    </tbody>
</table>

使用固定布局，在处理第一行时确定列的宽度。因此，需要在col 元素中设置宽度。否则，浏览器在处理第一行时不会有任何宽度要求，因此它会根据规范将总空间平均分配在列之间。

【讨论】：