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。这更奇怪。

截图

预期:

Chrome :

火狐:

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