border-collapse:collapse下rowspan=2单元格底部边框消失问题咨询

在Windows 10系统的Zen浏览器（Firefox分支）中，以下代码本应显示三个带完整边框的单元格，但第三个单元格的底部边框缺失。该问题可在Windows 10 Zen、macOS Firefox、Windows 10 Firefox、Android Firefox中复现，无法在iPhone Safari、iPhone Chrome中复现。

问题代码示例 #

CSS 代码 #

table {
    border-collapse: collapse;
}
td {
    border: 2px solid;
}
.top,
.middle {
    border-bottom: 0;
    padding-bottom: 0;
}
.bottom,
.middle {
    border-top: 0;
    padding-top: 0;
}

HTML 代码 #

<table>
    <tr>
        <td class='top'>a</td>
        <td class='top'>a</td>
        <td class='top'>a</td>
    </tr>
    <tr>
        <td class='middle'></td>
        <td class='middle'></td>
        <td rowspan='2' class='bottom'></td>
    </tr>
    <tr>
        <td class='bottom'></td>
        <td class='bottom'></td>
    </tr>
    <tr>
    </tr>
</table>

疑问点 #

• 为何第三个单元格及后续单元格会出现底部边框缺失的情况？
• 在开发者工具中移除再重新添加class='top'后，页面能重新渲染正常，这是什么原因？

问题触发条件 #

• 表格存在3个及以上可视化单元格
• 问题行之后有一行的可视化单元格数量比问题行少3个
• 从带有rowspan='2'的单元格开始，后续单元格均出现边框异常

在无middle类的最简示例中，缺失顶部边框符合预期，但底部边框缺失不符合预期。

临时解决方案 #

在表格最后一行填充无内容、无边框的<td>元素。

内容的提问来源于stack exchange，提问作者Brambor