Chrome下HTML表格边框渲染异常问题及修复咨询

嘿，这个问题我之前也碰到过！本质上是Chrome和Firefox在border-collapse: collapse模式下，处理跨多行单元格（rowspan）的边框叠加逻辑不一样导致的，咱们一步步拆解：

问题原因分析 #

1. 第一个表格：dashed边框变成实线 #

你给第一个表格的所有td都设置了border-style: dashed，但Chrome里c2的左边框显示成实线——这是因为那个占4行的rowspan="4"单元格（也就是"b"单元格）的右边框，和c2、c3的左边框在垂直方向上完全重叠。Chrome会把这两段dashed边框叠加渲染，导致原本的虚线间隙被填充，看起来就变成了实线；而Firefox在这种场景下只会渲染一层边框，所以虚线显示正常。

2. 第二个表格：c2、c3左边框颜色更深 #

第二个表格用了半透明的rgba(0,0,0,0.2)边框，Chrome里c2、c3的左边框颜色更深，是因为同样的叠加逻辑：rowspan单元格的右边框和c2、c3的左边框叠加后，相当于两层0.2透明度的黑色边框叠在一起，最终透明度接近0.4，视觉上颜色就更深了；Firefox则不会做这种叠加，所以所有边框颜色一致。

修复方案 #

有两种靠谱的解决思路，你可以根据自己的需求选：

方案一：避免边框叠加（推荐，保持collapse布局） #

通过CSS去掉会重叠的边框，让每个位置只保留一层边框：

table { border-collapse: collapse; }

/* 第一个表格修复 */
#first td { width: 200px; height: 80px; border-style: dashed; }
#first td[rowspan] { border-right: none; } /* 移除合并单元格的右边框 */
#first tr:not(:first-child) td:not([rowspan]) { border-left: none; } /* 移除c2、c3的左边框 */

/* 第二个表格修复 */
#second td { width: 200px; height: 80px; border-style: solid; border-color: rgba(0, 0, 0, 0.2); }
#second td[rowspan] { border-right: none; }
#second tr:not(:first-child) td:not([rowspan]) { border-left: none; }

这样调整后，Chrome和Firefox的渲染效果就完全一致了。

方案二：改用separate布局 #

把表格的border-collapse改成separate，同时设置border-spacing: 0，让每个单元格的边框独立渲染，避免叠加：

table { border-collapse: separate; border-spacing: 0; }
#first td { width: 200px; height: 80px; border-style: dashed; }
#second td { width: 200px; height: 80px; border-style: solid; border-color: rgba(0, 0, 0, 0.2); }

这个方案更简单，但要注意如果你的表格有复杂的边框样式，可能需要微调个别单元格的边框设置。

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