为border-collapse模式的表格前3行添加margin-bottom的解决方案

问题背景 #

我有一个结构类似如下的表格（使用border-collapse: collapse来保证行颜色正确且<td>之间无空隙）：

<table id="table"> 
  <tbody class="table-body"> 
    <tr class="table-row"> 
      <td class="table-data cell-counter">1</td> 
      <td class="table-data cell-description">HelloHello</td> 
    </tr> 
    <tr class="table-row"> 
      <td class="table-data cell-counter">2</td> 
      <td class="table-data cell-description">HelloHello</td> 
    </tr> 
    <tr class="table-row"> 
      <td class="table-data cell-counter">3</td> 
      <td class="table-data cell-description">HelloHello</td> 
    </tr> 
    <tr class="table-row"> 
      <td class="table-data cell-counter">10</td> 
      <td class="table-data cell-description">HelloHello</td> 
    </tr> 
    <tr class="table-row"> 
      <td class="table-data cell-counter">11</td> 
      <td class="table-data cell-description">HelloHello</td> 
    </tr> 
  </tbody> 
</table>

对应的CSS样式：

#table { 
  width: 100%; 
  color: black; 
  border-collapse:collapse; 
} 
.table-row td:nth-child(1), .table-row th:nth-child(1) { 
  width: 5%; 
  text-align: left; 
  padding-left: 5px; 
  padding-right: 5px; 
  vertical-align: middle; 
} 
.table-row td:nth-child(2), .table-row th:nth-child(2) { 
  text-align: center; 
} 
.table-body tr:nth-child(2n + 4) { 
  background-color: rgba(0, 0, 0, 0.4); 
} 
.table-body tr:nth-child(2n + 5) { 
  background-color: rgba(0, 0, 0, 0.6); 
} 
.cell-counter { 
  word-wrap: break-word; 
  font-weight: bold; 
  font-size: $larger-font-size; 
} 
.cell-description { 
  margin: 0; 
}

我想给前3行添加margin-bottom来制造间距，但因为用了border-collapse，margin完全不生效；如果在<td>前插入<div>又会破坏对齐（比如数字从1位变2位时的位置偏移）。请问有没有合适的解决方案？

实用解决方案 #

嘿，这个场景我之前也碰到过，给你几个靠谱的办法，完全不会破坏现有布局：

1. 透明边框法（最推荐） #

既然border-collapse下margin失效，我们可以给前3行的底部加透明边框——这个方法既不会影响行背景色，也不会破坏单元格对齐，数字位数变化也完全没问题。

只需要在CSS里加这段代码：

/* 给前3行添加透明下边框，8px是你想要的间距大小 */
.table-body tr.table-row:nth-child(-n+3) {
  border-bottom: 8px solid transparent;
}

原理是border-collapse会让行边框和单元格边框合并，透明边框只会在两行之间显示出“空白间距”，完美适配你的需求。

2. 单元格padding法（适合前3行无特殊背景色） #

如果前3行不需要特殊背景色，也可以给它们的单元格加底部padding，同时重置行背景色为表格的默认背景色，这样padding区域就会显示成空白间距：

/* 重置前3行背景色为表格背景（这里假设是白色，你可以替换成实际颜色） */
.table-body tr.table-row:nth-child(-n+3) {
  background-color: #ffffff;
}
/* 给前3行的所有单元格加底部padding */
.table-body tr.table-row:nth-child(-n+3) td {
  padding-bottom: 8px;
}

这个方法的好处是不需要修改边框属性，对齐也不会出问题。

3. border-spacing+伪元素法（需微调背景色逻辑） #

如果你能接受把border-collapse: collapse改成border-spacing: 0，可以用伪元素来模拟间距，但这个方法需要调整原有行背景色的选择器，因为伪元素会被算入nth-child的计数：

首先修改表格的基础样式：

#table { 
  width: 100%; 
  color: black; 
  border-collapse: separate; /* 替换原来的collapse */
  border-spacing: 0; /* 保证单元格之间无空隙 */
}

然后添加伪元素来生成间距：

/* 给前2行后面添加伪元素行，模拟间距（第3行后面不需要） */
.table-body tr.table-row:nth-child(-n+2)::after {
  content: "";
  display: table-row;
  height: 8px;
  background-color: #ffffff; /* 和表格背景色一致 */
}

注意：这个方法需要你调整原有tr:nth-child(2n + 4)这类背景色选择器的计数，因为伪元素会占用行的位置，所以适合背景色逻辑简单的场景。

内容的提问来源于stack exchange，提问作者Johan Jönsson