如何在不影响表头的前提下为表格tbody的单元格添加间距

仅tbody添加单元格间距（不影响thead） #

放弃全局border-spacing属性，通过拆分thead、tbody的渲染规则实现间距隔离：

1. 基础样式配置：

table {
  width: 100%;
  table-layout: fixed; /* 固定列宽，避免thead、tbody列宽错位 */
  border-collapse: collapse;
}
thead th {
  /* 按需配置表头样式，不会受tbody间距影响 */
  border: 1px solid #ccc;
  padding: 8px;
}

2. tbody单独配置间距：
   将tbody内的每一行设置为独立的表格元素，单独启用border-spacing仅在该行内部生效：

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 8px 4px; /* 第一个值为水平列间距，第二个值为垂直行间距，按需调整 */
  margin-bottom: 4px; /* 额外行间距也可通过margin实现 */
}
tbody td {
  border: 1px solid #ccc;
  padding: 8px;
}

实现效果符合要求：thead无单元格间距，下边框连贯无断开，仅tbody内部有间距。

tbody内仅部分列之间添加间距 #

如果不需要所有列都有间距，可以通过透明边框精准控制指定列的间距，不用修改全局border-spacing：

1. 先重置tbody行的border-spacing为0：

tbody tr {
  border-spacing: 0;
}

2. 给需要加间距的列位置配置透明边框，比如要在第2列和第3列之间加10px间距：

tbody td:nth-child(2) {
  border-right: 10px solid transparent;
}

如果需要多个位置的自定义间距，继续添加对应选择器即可，比如在第4列和第5列之间加15px间距：

tbody td:nth-child(4) {
  border-right: 15px solid transparent;
}

该方法实现的是单元格之间的外部间距，和border-spacing效果一致，不会像padding一样占用单元格内部空间。

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