border-collapse属性导致HTML表格表头与数据不对齐问题咨询

核心差异来自border-collapse两种模式的渲染规则 #

• border-collapse: collapse 模式下触发错位的原因
  • 该模式的核心规则是相邻单元格的边框会合并共享，边框宽度直接纳入表格总列宽的统一计算，上下行对应列的边框会参与合并适配。
  • 你的代码仅为<td>元素设置了左右边框，<th>无任何边框配置，浏览器布局时为了承接表体<td>的边框宽度，会自动拉伸表体列的总宽度，导致表头背景范围和表体边框范围出现视觉错位，看起来就是边框向外超出了表头区域。
• border-collapse: separate 模式下对齐正常的原因
  • 该模式下每个单元格的边框是独立渲染的，不会和相邻/上下行单元格合并，边框宽度仅作用于当前单元格的盒模型，不会触发全局列宽的额外适配。
  • 搭配border-spacing: 0消除了单元格默认间距后，<td>的边框仅在自身区域绘制，不需要表头<th>做宽度适配，因此对齐效果正常。

可选修复方案（保留collapse模式） #

给<th>补充和<td>一致的边框规则即可解决对齐问题：

th {
  border-right: 1px solid #cecfd5;
}
th:first-child {
  border-left: 1px solid #cecfd5;
}

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