为什么HTML表格的空行无法正常显示background-color？

问题原因 #

• 你给表格设置了border-collapse: collapse折叠边框模式，当<tr>内没有任何<td>/<th>单元格元素时，浏览器会判定该行为无效空行，直接跳过背景、边框的渲染。
• 你为<tr>设置的:before伪元素用了display: block，但<tr>本身是table-row类型的表格元素，子节点仅识别table-cell类型的内容，block类型的伪元素不会被计入表格布局的内容高度，无法撑开空行，也不会触发背景渲染。

可行解决方法 #

方案1：为空行添加占位单元格（兼容性最好，推荐） #

给空<tr>添加一个跨全列的空<td>，同时给表格设置empty-cells: show保证空单元格正常渲染：

/* 调整原有样式 */
.collapse {
  border-collapse: collapse;
  empty-cells: show; /* 新增：声明显示空单元格样式 */
}

<table class="collapse">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <!-- colspan值和表格总列数保持一致即可 -->
        <td colspan="4"></td>
    </tr>
</table>

方案2：调整伪元素适配表格布局规则 #

如果你不想额外加<td>节点，可以修改伪元素的display属性适配表格规则，注意该方案仅建议给空行单独加类名绑定样式，避免影响有内容的行：

/* 给空tr单独加类名避免影响其他行 */
tr.empty-tr:before{
    content: "";
    min-height: 2rem;
    display: table-cell; /* 适配表格元素的子节点规则 */
    width: 100%;
}

方案3：移除折叠边框规则 #

如果不需要合并边框，直接删掉border-collapse: collapse样式即可，空行的背景和伪元素高度会正常生效，但表格边框会变成默认的分离模式。

内容的提问来源于stack exchange，提问作者i like Cola