Bootstrap3.3.7中table-bordered类表格边框粗细不均如何调整为一致？

问题本质 #

该现象不属于视觉误差，核心是.table-bordered默认的边框折叠规则导致：

• Bootstrap 3.x默认给带边框表格设置了border-collapse: collapse，相邻单元格的边框会重叠合并，不同位置的边框叠加后厚度会出现差异
• 高DPI屏幕的亚像素渲染会放大该差异，最终呈现出部分边框更粗的效果
  

解决方案 #

方案1：改用边框分离模式（兼容性最好，无叠加问题） #

覆盖默认表格样式，关闭边框折叠，手动控制边框绘制逻辑，彻底避免叠加问题：

/* 关闭边框折叠，清零单元格间距 */
.table.table-bordered {
  border-collapse: separate;
  border-spacing: 0;
}
/* 统一单元格仅保留左侧和下侧边框 */
.table.table-bordered td,
.table.table-bordered th {
  border: 1px solid #ddd;
  border-width: 0 0 1px 1px;
}
/* 表格整体补充右侧和上侧边框，形成完整闭合的均匀边框 */
.table.table-bordered {
  border: 1px solid #ddd;
  border-width: 1px 1px 0 0;
}

如果需要调整边框厚度，直接修改上述代码中的1px为对应数值即可。

方案2：保留折叠模式下的修复 #

如果必须保留border-collapse: collapse的特性，强制所有边框属性完全统一即可：

.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td {
  border: 1px solid #ddd !important;
}

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