全宽表格宽度超出父容器1px问题求助：CSS边框配置排查

这个问题我碰到过好几次，根源其实在表格边框合并的配置上！先给你理清楚问题出在哪，再给你完整的正确配置：

问题原因 #

你提到要启用边框合并，但从给出的代码片段看，table标签应该没补全border-collapse: collapse这个关键属性。浏览器默认的表格边框模式是border-collapse: separate，这种模式下，单元格的边框是独立计算的——哪怕你给表格设了width:100%，单元格的边框宽度会额外叠加在这个100%宽度之外，自然就出现了总宽度超出父容器1px的情况。

另外，就算你全局设了box-sizing: border-box，这个属性在表格separate边框模式下并不生效，表格的宽度计算规则和普通块级元素不一样。

正确的CSS配置 #

* { 
  box-sizing: border-box; 
}
div { 
  width: 200px; 
  overflow-x: auto; 
}
table {
  width: 100%;
  border-collapse: collapse; /* 必须启用边框合并，核心解决点 */
  border-spacing: 0; /* 消除浏览器默认的单元格间距 */
}
th {
  border: none; /* 显式移除表头边框，覆盖浏览器默认样式 */
}
td {
  border: 1px solid #000; /* 数据单元格四边统一1px边框 */
}

关键细节说明 #

1. border-collapse: collapse：启用后，相邻单元格的边框会合并成一个，表格的总宽度会包含边框宽度，width:100%就会严格匹配父容器的宽度，不会出现超出。
2. border-spacing: 0：清除浏览器默认的单元格间距，避免额外的宽度占用。
3. 表头边框重置：有些浏览器会给<th>标签加默认边框，一定要显式设置border: none来完全移除。

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