为何未设置border-collapse:collapse时tr元素边框无法显示？

问题代码 #

HTML：

<table>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

CSS：

table {
    height: 20px;
    width: 30px;
    border: solid 1px;
    /* border-collapse: collapse; */
}

tr {
    border: 1px solid;
}

问题现象 #

开启border-collapse: collapse时，<tr>的边框正常显示；注释掉该属性（即使用默认的separate模式），<tr>的边框完全消失。

原因解析 #

这是CSS表格模型的规则决定的：

• 当border-collapse: collapse（边框合并模式）时，表格的行、单元格边框会合并成统一的边框区域，此时<tr>的边框样式会被应用到合并后的边框上，所以能看到效果。
• 但在默认的border-collapse: separate（分离边框模式）下，<tr>元素本身不支持设置边框——分离模型里只有<table>、<td>/<th>这类元素拥有可渲染的边框区域，<tr>的边框属性会被浏览器直接忽略，自然看不到任何边框。

解决方案 #

如果想在分离边框模式下实现行边框效果，应该给<td>/<th>元素设置边框，比如：

td {
    border-top: 1px solid;
    border-bottom: 1px solid;
}

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