如何去除HTML table边框间的多余空白间隙

问题根源 #

现有代码存在三个直接导致边框间隙的问题：

• border-collapse、border-spacing属性未加优先级标识，和Bootstrap（当前使用的类名是Bootstrap默认表格类）或其他全局样式冲突时，边框合并规则会被覆盖，实际未生效
• 选择器写死了> tbody > tr > td的层级，虽然浏览器会自动补全缺失的tbody标签，但部分渲染内核下仍会出现样式漏匹配，加上空单元格默认走基线对齐规则，会产生横竖边框衔接处的微小缝隙
• 用白色下边框模拟“分隔线隐藏”的写法有兼容问题：边框合并模式下，不同颜色的横竖边框在转角位置的渲染优先级不统一，会直接出现空白缺口

修复步骤 #

直接按以下调整即可完全消除间隙：

• 给边框合并相关属性加!important提升优先级，同时添加固定表格布局规则减少渲染异常
• 简化单元格选择器，统一匹配所有th/td，避免层级选择器漏匹配；重置单元格默认内边距、取消基线对齐，消除空单元格的渲染间隙
• 替换白色边框的hack写法，直接移除不需要的边框，从根源避免不同颜色边框的衔接冲突
• 显式补全tbody标签，保证DOM结构和选择器完全匹配

修正后完整代码 #

CSS部分 #

.table-bordered {
    border: 1px solid #9a9a9a !important;
}
.table{
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed;
}
.table th,
.table td {
    border: 1px solid #9a9a9a !important;
    /* 按需调整内边距数值即可，不要留浏览器默认值 */
    padding: 8px;
    vertical-align: top;
    empty-cells: show;
}
/* 直接移除边框，不要用同色边框模拟隐藏 */
.table-bordered > tbody > tr > td.border-bottom-none {
    border-bottom: none !important;
}

HTML部分 #

<table class="table table-bordered">
  <thead>
    <tr>
      <td>H1</td>
      <td>H2</td>
      <td>H3</td>
      <td>H1</td>
      <td>H2</td>
      <td>H3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="border-bottom-none"></td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td colspan="3" class="border-bottom-none"></td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td colspan="3"></td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

补充说明 #

• 如果修改后仍存在极细的1px渲染缝隙，可以移除table本身的border，将表格外层边框统一设置在最外层行列的单元格上，彻底避免多层边框合并的冲突
• 不要给table、tr、td添加任何margin相关属性，表格元素的边距规则和普通块元素不同，设置margin反而会加剧布局异常
• 如果需要空单元格保持固定高度，直接给td设置min-height即可，不需要额外添加 占位，避免多余内容撑高单元格

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