Css 当colspan设置在下面的td行上时，单个th的边界扩展到相邻th

具有以下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>​

​ 我希望第二个单元格下方有一张3倍绿色实线的表格。 我在第二个和第三个单元格下面都有绿色的实心边框，而不是Chrome

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

您可以在中看到示例

PS：试着设置

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

然后试着把它提高到3倍。这就更奇怪了

屏幕截图

预期：

铬：

火狐：

---

嗯，我不知道这是不是一个bug，但当我遇到这个问题时 为了解决这个问题，我想出了一个简单的解决方法：插入一个额外的行/列 要应用边框样式的位置

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

我在chrome上测试了这一点，这是另一个例子：

我想这更容易理解。我的解决办法很简单。我不需要设置

border collapse:collapse

set。将我的表更改为：

table {
    border-collapse: separate;
}

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

另一种解决方案是在带边框的单元格前添加一个宽度为0的列，如下所示

css:

html:

3匹
1详情
2正常
3正常

我无法重现您的问题。另外，你能把你的问题改写一下，让它更清楚地说明你看到了什么和你期望看到什么吗？我已经添加了截图你只是在看小提琴吗？将你的代码放入一个静态HTML文件并加载到Chrome中，你看到了同样的情况吗？我不。我在Chrome中看到了正确的显示，在Chrome中看到了不正确的显示。@mmcglyn您需要添加

表{border collapse:collapse；}

rule@mmcglynn不是真的。这并不能解释firefox和chrome中的不同行为。我仍然感兴趣的是，当colspan和border Collapson正在使用时，只设置第1个的边界是非法的，还是仅仅是chrome bug。

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 {
}

table {
    border-collapse: separate;
}

.hack {
    width: 0;
}

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