IE9 表格布局固定 colspan 不被尊重答案

【问题标题】：IE9 table-layout fixed colspan not respectedIE9 表格布局固定 colspan 不被尊重
【发布时间】：2013-02-28 11:48:11
【问题描述】：

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

Table rendering with cols and colspan on tds in IE9

我遇到的问题是我的表中的第二个 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 错误，但我无法在 google 上找到它（也许我没有搜索正确的关键字？）。任何解决方案或错误报告的链接将不胜感激！

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

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

【问题讨论】：

确保您运行的是 IE9 模式 :x 因为它在 IE7 和 IE8 中运行良好...
您添加额外列的方法对我有用。

标签： html css internet-explorer-9

【解决方案1】：

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

希望这有帮助吗？

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

嘿... IE9...

找到一个“修复”...想法来自：Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

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

<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/

【讨论】：

你可以留下填充，然后选择第一个tr并删除它们的填充：#test tr:first-child td {padding:0}
我认为这是 IE 中的一个错误（你知道什么）。这个小提琴也失败了jsfiddle.net/DUCPp/1 确实是非常奇怪的行为。

【解决方案4】：

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

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

【讨论】：

我已经尝试定义列，但无济于事...看看我上面发布的解决方案是否正常：/