当colspan设置在下面的td行时，单个th的边界传播到邻近的th

Question

拥有以下HTML代码：

<table>
<tr><th>First</th><th class='second'>Second</th><th class='third'>Third</th><th>Fourth</th></tr>
<tr><td>Mike</td><td colspan=2 >John</td><td>Paul</td></tr>
</table>​

跟随css：

table {
    border-collapse: collapse;
}

td, th {
border: 1px black solid;
}

td {
    border-top: none;
}
th {
    border-bottom: none;
}
th.second {
    border-bottom: 3px green solid;
}
th.third {
}

我期望结果一个表在第二个单元格下面有3px绿色实线。 而不是在Chrome中，我在第二和第三个单元格下面都有坚实的绿色边框。

在Firefox中，结果与预期一致。这是浏览器错误，还是我的代码是非法的？

您可以在http://jsfiddle.net/tt6aP/3/

看到示例

PS：尝试设置

th.third {
    border-bottom: 2px solid red;
}

然后尝试将其提高到3px。这更奇怪。

截图

预期：

铬：

火狐：

Answer 1

好吧，我不知道这是不是一个错误，但当我跑过这个时 问题，我提出了一个简单的解决方法：插入一个额外的行/列 你想要应用边框样式的地方。

<table>
    <tr>
        <th>Ano</th>
        <th class='first'>First</th>
        <th class='second'>Second</th>
        <th class='third'>Third</th>
    </tr>
    <tr class='hack'>
        <td></td>
        <td></td>
        <td></td>
        <td></td>        
    </tr>
    <tr>
        <td>Mike</td>
        <td colspan=2 >John</td>
        <td>Paul</td>
    </tr>
</table>

这是css：

table {
    border-collapse: collapse;
}
tr.hack > td {
    height:0px;
}
td, th {
    border: 1px black solid;
}
tr.hack > td, td {
    border-top: none;
}
tr.hack > td, th {
    border-bottom: none;
}
th.first {
    border-bottom: 3px green solid;
}
th.second {
}
th.third {
}

我在chrome over here

上对此进行了测试

Answer 2

另一个例子：http://jsfiddle.net/huggz/LVjja/3/

我认为更容易理解。我的解决方案非常简单。我不需要border-collapse: collapse设置。将我的表格改为：

table {
    border-collapse: separate;
}

一切正常。我不得不认为这是一个错误。像Chrome这样的感觉只是选择了错误的边框长度来显示，当它折叠边框时。它显示的是上面行的长度，而不是当前单元格的长度。

另一种解决方案是在边界单元格之前添加0宽度列，如http://jsfiddle.net/huggz/LVjja/6/

的CSS：

.hack {
    width: 0;
}

HTML：

<tr>
    <td colspan="4">3 Cols</td>
</tr>
<tr>
    <td class="hack"></td>
    <td class="top_border">1 details</td>
    <td>2 normal</td>
    <td>3 normal</td>
</tr>