如何为设置border-collapse: separate的表格行添加无间隙分隔线？

问题场景 #

当表格设置border-collapse: separate时，直接给<tr>添加border-bottom不会生效；给<td>添加border-bottom又会因为border-spacing导致列之间的分隔线出现间隙，示例代码如下：

table {
  width: 100%;
  text-align: center;
  border-collapse: separate;
  border-spacing: 5px 0;
}

th {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid blue;
}

td {
  white-space: nowrap;
  border-bottom: 1px solid red;
}

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <tr>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
  </tr>
  <tr>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
  </tr>
</table>

我们需要实现类似border-collapse: collapse时给<tr>加border-bottom的无间隙整行分隔线效果。

解决方案 #

方案1：用<tr>伪元素模拟整行分隔线

利用伪元素绝对定位，在每个<tr>底部生成一条撑满表格宽度的分隔线，完全绕过separate模式下<tr>无法设置边框的限制：

table {
  width: 100%;
  text-align: center;
  border-collapse: separate;
  border-spacing: 5px 0;
  position: relative; /* 为伪元素提供定位上下文 */
}

th {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid blue;
}

/* 给除最后一行外的所有行添加分隔线 */
tr:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: red;
}

td {
  white-space: nowrap;
  padding: 0.5rem 1rem; /* 增加内边距避免内容与分隔线重叠 */
}

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <tr>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
  </tr>
  <tr>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
    <td>Some Data</td>
  </tr>
</table>

方案2：用box-shadow填补<td>边框间隙

如果坚持使用<td>的border-bottom，可以通过box-shadow覆盖列之间的间隙，阴影偏移量需与border-spacing的水平值一致：

table {
  width: 100%;
  text-align: center;
  border-collapse: separate;
  border-spacing: 5px 0;
}

th {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid blue;
}

td {
  white-space: nowrap;
  border-bottom: 1px solid red;
  /* 左右阴影填补border-spacing的间隙 */
  box-shadow: 5px 0 0 -4px red, -5px 0 0 -4px red;
}

方案对比 #

• 伪元素方案：分隔线是完整的单条线，不受列间距影响，兼容性好，适合大多数场景。
• box-shadow方案：无需修改定位逻辑，但需根据列间距调整阴影参数，适合列间距固定的场景。

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