Question

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

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/

应该发生什么： enter image description here

IE9给了我什么： enter image description here

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

更新我在第二个colspan = 2列之后添加了一个额外的列，它将正确呈现。我推断如果连续的最后一列有colspan＆gt; 1，然后它将被渲染为好像colspan = 1。

有关修复的想法吗？我现在几乎肯定这是一个IE9错误＆lt; _＆lt;

Answer 1

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

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”版本。即放在初始标签之前。

希望这有帮助吗？

IE9表格布局固定colspan不受尊重

4 个答案: