如何在HTML Table中冻结前两列及边框？

问题根源在于border-collapse: collapse的边框合并机制——滚动时非冻结列的边框会和冻结列的边框重叠错位。以下是修复后的完整实现：

修改后的CSS #

.view {
  margin: auto;
  width: 600px;
}

.wrapper {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white;
  z-index: 1; /* 确保冻结列滚动时处于上层，边框不被覆盖 */
  border-right: 1px solid black; /* 单独设置右侧边框，避免被滚动列干扰 */
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 100px;
}

table {
  border-collapse: separate; /* 改用separate模式，避免边框合并冲突 */
  border-spacing: 0; /* 保持单元格间距为0，视觉效果和collapse一致 */
  width: 100%;
}

th, td {
  border: 1px solid black;
  border-right: none; /* 移除默认右侧边框，统一由冻结列控制 */
}

/* 恢复表格最后一列的右侧边框，保证整体边框完整 */
th:last-child, td:last-child {
  border-right: 1px solid black;
}

对应HTML（结构无改动） #

<div class="view">
  <div class="wrapper">
    <table class="table">
      <thead>
        <tr>
          <th class="sticky-col first-col">Number</th>
          <th class="sticky-col second-col">First Name</th>
          <th>Last Name</th>
          <th>Employer</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sticky-col first-col">1</td>
          <td class="sticky-col second-col">Mark</td>
          <td>Ham</td>
          <td>Micro</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">2</td>
          <td class="sticky-col second-col">Jacob</td>
          <td>Smith</td>
          <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">3</td>
          <td class="sticky-col second-col">Larry</td>
          <td>Wen</td>
          <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

核心修改逻辑 #

1. 切换边框模式：用border-collapse: separate替代collapse，避免冻结列和滚动列的边框合并后出现错位。
2. 分层控制：给冻结列加z-index: 1，确保滚动时冻结列的边框不会被后面的单元格覆盖。
3. 边框精细化控制：移除所有单元格默认右侧边框，仅给冻结列单独设置右侧边框，最后恢复表格末列的右侧边框保证整体完整性。

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