html - IE9 表格布局固定 colspan 不被尊重

Question

我找到了这个主题，我的主题是相关的，但不一样：

在 IE9 的 tds 上使用 cols 和 colspan 进行表格渲染

我遇到的问题是我的表中的第二个 colspan=2 没有被 IE9 读取，有趣的是它可以在 IE7 和 IE8 中找到，但不能在 IE9 中找到。也许我做错了什么，所以这里是：

HTML：

<table id="test">
    <tbody>
        <tr>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
        </tr>
    </tbody>
</table>

CSS：

#test {
    width: 100%;
    border-spacing: 20px;
    border-collapse: separate;
    table-layout: fixed;
}

#test td {
    position: relative;
    background-color: #cccccc;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
    padding: 10px;
}

jsFiddle：http: //jsfiddle.net/DUCPp/1/

应该发生什么：

IE9 给了我什么：

我确信这是一个 IE9 错误，但我无法在谷歌上找到它（也许我没有搜索正确的关键字？）。任何解决方案或错误报告的链接将不胜感激！

更新： 我在第二个 colspan=2 列之后添加了一个额外的列，它将正确呈现。我推断如果一行中的最后一列 colspan > 1，那么它只会被渲染为 colspan = 1。

关于修复的任何想法？我现在几乎可以肯定这是一个 IE9 错误 <_<

Answer 1

呵呵……IE9……

找到了一个“修复”......想法来自：Colspan on cell in one row 似乎阻止在所有其他行中设置 TD 宽度。为什么？

基本上我必须添加一个空行，其中包含正确的空单元格数：

<table id="test">
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
            <td>COLSPAN = 1</td>
            <td colspan="2">COLSPAN = 2</td>
        </tr>
    </tbody>
</table>

不漂亮...我需要删除单元格的填充以使其不显示。叹...

jsFiddle：http: //jsfiddle.net/DUCPp/5/

Answer 2

您要做的是在标题中通过 TH 设置列的宽度，因为浏览器将使用它来确定后续行中的表格和列的宽度。

看看下面的例子：

<table>
    <thead>
        <tr style="height: 0px;">
            <th style="width: 110px; height:0px;"></th>
            <th style="width: 160px; height: 0px;"></th>
            <th style="width: 210px; height: 0px;"></th>
            <th style="width: 110px; height: 0px;"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">Hello</td>
            <td>There</td>
        </tr>   
    </tbody>  
</table>

Answer 3

您似乎没有为列定义任何固定宽度。你应该在之前使用这样的东西<tbody>：

<col span="6" style="width:16%;" />

Answer 4

我通过在 HTML 代码的开头添加 doctype 声明解决了类似的问题。请参阅http://www.w3.org/QA/2002/04/valid-dtd-list.html 我添加的具体声明是针对版本“HTML 4.01 Transitional”。即放置在初始标签之前。

希望这可以帮助？