css - 当 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 上测试了这个

Answer 2

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

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

table {
    border-collapse: separate;
}

一切正常。我不得不认为这是一个错误。当 Chrome 折叠边框时，感觉就像 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>