如何在启用border-collapse: collapse的表格中保留粘性列边框

问题根源在于border-collapse: collapse会合并所有单元格的边框，滚动时非粘性单元格的边框与粘性列边框处于同一堆叠层级，导致被覆盖。以下是可行的修复方案：

核心解决方案：提升粘性列堆叠层级 #

给粘性列的单元格添加相对定位和z-index，让它的边框始终处于其他单元格之上，同时设置背景色避免内容透出：

代码示例 #

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th class="sticky-left">序号</th>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <th class="sticky-right">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-left">1</td>
        <td>测试内容1</td>
        <td>测试内容2</td>
        <td>测试内容3</td>
        <td>测试内容4</td>
        <td class="sticky-right">编辑</td>
      </tr>
      <tr>
        <td class="sticky-left">2</td>
        <td>测试内容1</td>
        <td>测试内容2</td>
        <td>测试内容3</td>
        <td>测试内容4</td>
        <td class="sticky-right">删除</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 1200px;
  border-collapse: collapse;
  background-color: #ffffff;
}

th, td {
  border: 1px solid #e0e0e0;
  padding: 10px;
  text-align: left;
}

/* 左侧粘性列配置 */
.sticky-left {
  position: sticky;
  left: 0;
  background-color: #ffffff;
  /* 关键：提升层级避免边框被覆盖 */
  position: relative;
  z-index: 1;
  border-right: 2px solid #2196f3;
}

/* 右侧粘性列配置 */
.sticky-right {
  position: sticky;
  right: 0;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
  border-left: 2px solid #2196f3;
}

备选方案：用背景渐变模拟边框 #

如果上述方案仍有问题，可以用background-image的线性渐变模拟边框，避开边框合并的影响：

.sticky-left {
  position: sticky;
  left: 0;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
  /* 模拟右侧边框 */
  background-image: linear-gradient(to right, transparent calc(100% - 2px), #2196f3 calc(100% - 2px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sticky-right {
  position: sticky;
  right: 0;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
  /* 模拟左侧边框 */
  background-image: linear-gradient(to right, #2196f3 2px, transparent 2px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

注意：两种方案都需要确保粘性列的背景色与表格背景完全一致，防止滚动时其他单元格内容透过粘性列显示。

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