HTML/CSS表格表头如何完整填充背景色 解决单元格分隔留白问题

问题原因 #

浏览器默认给表格设置的border-collapse属性值为separate，该渲染模式下每个单元格都是独立元素，单元格之间会保留默认间距，给<tr>行标签设置的背景色无法覆盖这些间隙区域，就会露出底层的白色背景。

解决方案 #

方案1（推荐，常规场景使用） #

给表格类.contentTable添加border-collapse: collapse;属性，该属性会合并相邻单元格的边框，直接消除单元格之间的空隙，表头行设置的背景色就能完整铺满整行。
修正后的完整CSS代码如下：

.contentTable {
    padding-top: 10mm;
    table-layout: auto;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse; /* 新增属性，合并单元格边框消除间隙 */
}
.contentTable th{
    font-size: medium;
    /* 可按需添加padding调整表头内边距，例如 padding: 8px 12px; */
}
.contentTable td{
    font-size: small;
    /* 可按需添加padding调整单元格内边距 */
}

.contentTableHeader {
    background-color: cornflowerblue;
    color:azure;
}

方案2（特殊场景备用，需保留单元格独立边框/圆角时使用） #

如果设计需要保留单元格独立样式（比如给表头单元格加单独圆角），不想合并边框，可以通过两个属性调整实现效果：

1. 给表格设置border-spacing: 0;清除单元格之间的默认间距
2. 将背景色、字体色样式直接绑定到表头单元格<th>上，而非<tr>行标签
   对应代码如下：

.contentTable {
    padding-top: 10mm;
    table-layout: auto;
    width: 100%;
    max-width: 100%;
    border-spacing: 0; /* 清除单元格默认间距 */
}
.contentTable th{
    font-size: medium;
}
.contentTable td{
    font-size: small;
}

/* 把原行样式迁移到th单元格上 */
.contentTableHeader th {
    background-color: cornflowerblue;
    color:azure;
}

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