如何让HTML表格单元格边框宽度一致？重复设置边框的解决方法

问题根源 #

你仅为<td>设置了四边1px边框，但<thead>中的<th>未配置边框样式；同时在border-collapse: collapse模式下，相邻单元格边框会合并，由于表头与内容单元格的边框规则不统一，加上表格边缘边框仅由单边单元格提供，缩放时就会出现边框宽度不一致的视觉差异。

解决方案一：统一单元格边框+补全表格外边框 #

使用border-collapse: collapse时，为所有单元格（<td>和<th>）统一设置边框，同时给表格本身添加相同样式的边框，确保内外边框完全一致：

table {
  border-collapse: collapse;
  border: 1px solid black; /* 补全表格外边框，避免边缘仅单边边框 */
}

td, th {
  border: 1px solid black; /* 统一所有单元格的边框样式 */
}

对应的HTML无需修改，所有单元格边框在合并后均保持1px宽度，表格外边框也与内边框匹配，缩放时不会出现差异。

解决方案二：拆分边框设置，避免重复叠加 #

改用border-spacing: 0，将表格外边框与单元格内边框拆分设置，彻底避免边框重复叠加的问题：

table {
  border-spacing: 0;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

td, th {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

这种方式下，表格负责左侧和顶部的外边框，每个单元格仅设置右侧和底部边框，相邻单元格的边框自然衔接，所有边框宽度均为1px，不会出现合并或叠加导致的宽度不一致。

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