为表格设置CSS边框网格：边框宽度不一致问题解决问询

Chrome和Edge（基于Blink引擎）确实存在表格边框渲染的精度问题：在特定分辨率或缩放比例下，相邻的表格边框与单元格边框可能被叠加渲染成2px宽度，这是因为Blink引擎在处理边框合并时的像素对齐逻辑与Firefox的Gecko引擎不同，导致跨浏览器显示不一致。

以下是实现内外统一1px边框网格的最佳方案，按推荐优先级排序：

1. 使用border-collapse: collapse（最推荐） #

这是W3C标准的表格边框处理方式，浏览器会自动合并相邻边框，彻底避免叠加问题，代码简洁且跨浏览器兼容性极佳。

table {
  border-collapse: collapse;
  width: 100%; /* 根据需求调整宽度 */
}

table, th, td {
  border: 1px solid #e0e0e0; /* 自定义边框颜色 */
}

优势： #

• 原生语义化，保留表格的结构特性
• 所有现代浏览器（包括Chrome、Edge、Firefox、移动端）均完美支持
• 无需额外处理边框叠加，自动合并为单一1px边框

2. 使用CSS Grid模拟表格（非语义化场景） #

如果不需要表格的语义化结构（比如纯展示型布局），可以用CSS Grid完全手动控制边框，避开表格渲染引擎的差异：

.table-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 按实际列数调整 */
  border: 1px solid #e0e0e0;
}

.grid-cell {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px; /* 自定义内边距 */
}

/* 移除最后一列的右边框 */
.grid-cell:nth-child(3n) {
  border-right: none;
}

/* 移除最后一行的下边框 */
.grid-cell:nth-last-child(-n+3) {
  border-bottom: none;
}

优势： #

• 完全自主控制边框，不受浏览器表格渲染逻辑影响
• 适合需要复杂自定义布局的场景

3. 边框偏移方案（兼容老浏览器） #

如果需要兼容非常老旧的浏览器，可采用“表格加右下边框+单元格加左上边框”的方案，同时配合border-spacing: 0消除间距，并通过硬件加速优化渲染：

table {
  border-spacing: 0;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
  /* 触发硬件加速，缓解Chrome/Edge的像素对齐问题 */
  transform: translateZ(0);
}

th, td {
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 8px;
}

注意： #

该方案在Chrome/Edge的高DPI屏幕下仍可能出现细微的边框叠加，优先推荐前两种方案。

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