表格第三行中间两列合并失败，求代码错误排查及解决方法

你的代码里，导致第三行中间两列看起来没合并的问题根源是**border-spacing: 0.5em**这个CSS属性：

这个属性会给表格单元格之间添加额外间距，且该间距不属于单元格本身的内容区域。哪怕你用colspan="2"合并了中间两列，这个间距依然会在原本两个单元格的位置显示出来，视觉上就像是合并没生效。而你的HTML写法是完全正确的，colspan的使用逻辑没问题。

解决方法 #

有两种方式可以修复这个问题：

方法1：移除或重置border-spacing

直接删掉table { border-spacing: 0.5em; }这行代码，或者把值设为0，消除单元格额外间距后，合并效果就能正常显示：

table {
  border: 1px solid #999;
  border-spacing: 0; /* 重置为0，或者直接删掉这行 */
}

td {
  height: 20px;
  width: 50px;
  border: 1px dashed red;
}

方法2：用内边距替代border-spacing实现间距效果

如果需要保留单元格之间的间距视觉，不要用border-spacing，改用单元格的padding来模拟间距，同时保持border-collapse: separate（默认值，可省略）：

table {
  border: 1px solid #999;
}

td {
  height: 20px;
  width: 50px;
  border: 1px dashed red;
  padding: 0 0.25em; /* 左右各0.25em，总间距0.5em，和原效果一致 */
}

修改后，第三行的中间两列合并效果就能正常呈现了。

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