滚动时表格thead边框异常，求border-collapse:separate下的解决方案

当表格设置border-collapse:separate且表头固定滚动时，tbody滚动内容会和thead边框重叠，导致边框显示断裂、异常——本质是separate模式下每个单元格的边框都是独立元素，滚动时下方单元格会覆盖表头边框的部分区域。下面是几种可行的解决思路：

1. 给thead/tr设置纯色背景 #

用背景色盖住下方滚动的内容，避免边框被遮挡。注意背景色要和表格整体背景匹配，示例代码：

thead {
  position: sticky;
  top: 0;
  background-color: #fff; /* 和表格背景一致 */
}

thead th {
  border: 1px solid #ddd;
}

如果用半透明背景，还是会透出下方内容，建议用纯色。

2. 统一表头底部边框，避免重叠 #

给thead设置单独的底部边框，同时去掉th自身的底部边框和tbody的顶部边框，防止重复或重叠：

thead {
  position: sticky;
  top: 0;
  background-color: #fff;
  border-bottom: 2px solid #ddd; /* 加粗边框提升视觉优先级 */
}

thead th {
  border: 1px solid #ddd;
  border-bottom: none; /* 取消th自身底部边框 */
}

tbody {
  border-top: none; /* 取消tbody顶部边框 */
}

这种方式适合需要统一表头底部样式的场景。

3. 利用z-index提升表头层级 #

配合sticky定位给thead设置更高的z-index，确保表头边框在tbody内容之上，同时搭配背景色防止内容透出：

thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

z-index必须和position属性一起生效，所以thead的sticky定位不能少。

完整示例代码 #

<div class="table-container" style="height: 300px; overflow-y: auto;">
  <table style="width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #ddd;">
    <thead style="position: sticky; top: 0; z-index: 1; background-color: #fff;">
      <tr>
        <th style="border: 1px solid #ddd; padding: 8px;">列1</th>
        <th style="border: 1px solid #ddd; padding: 8px;">列2</th>
        <th style="border: 1px solid #ddd; padding: 8px;">列3</th>
      </tr>
    </thead>
    <tbody>
      <tr><td style="border: 1px solid #ddd; padding: 8px;">内容1</td><td>内容2</td><td>内容3</td></tr>
      <tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
      <tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
      <!-- 重复多行测试滚动效果 -->
    </tbody>
  </table>
</div>

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