Bootstrap 3使用table-bordered类表格边框粗细不均如何解决

问题原因 #

这个问题不属于显示硬件故障，是CSS规则与浏览器渲染逻辑共同导致的：

• Bootstrap 3 默认的.table-bordered类会同时给表格本身、单元格<th>/<td>都设置1px边框，且默认开启border-collapse: collapse（边框合并）属性
• 页面存在缩放、使用高分屏时，浏览器对1px边框的亚像素计算会出现偏差，部分重叠的边框会被渲染为2px视觉效果，就会出现边框粗细不均的情况

解决方案 #

方案1（推荐，无兼容性问题）

重写表格边框规则，用分离边框模式替代合并模式，避免边框重叠：

.table.table-bordered {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
}
/* 单元格只保留右、下边框，避免和表格、相邻单元格边框重复 */
.table.table-bordered th,
.table.table-bordered td {
  border: none;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
/* 移除最后一列的右边框、最后一行的下边框 */
.table.table-bordered th:last-child,
.table.table-bordered td:last-child {
  border-right: none;
}
.table.table-bordered tr:last-child th,
.table.table-bordered tr:last-child td {
  border-bottom: none;
}

方案2（轻量修复，适合快速调整）

给表格添加GPU加速触发属性，强制浏览器重新计算渲染像素：

.table.table-bordered {
  transform: translateZ(0);
}

方案3（调整边框宽度，适配缩放场景）

如果允许调整边框粗细，可以直接把边框宽度设为偶数像素，避免亚像素计算偏差：

.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td {
  border-width: 2px;
}

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