如何在HTML表格滚动时保留固定列的右侧边框？

问题根源 #

设置position: sticky的列在滚动时，右侧边框会被后续非固定列的单元格覆盖——默认情况下所有单元格层级相同，滚动时后续元素会叠加在固定列的边框之上；若表格使用border-collapse: collapse，边框会被表格的合并规则影响，无法独立显示。

可行解决方案 #

方案1：伪元素+层级控制（推荐） #

通过伪元素给固定列添加右侧边框，同时提升固定列和伪元素的层级，确保边框不会被覆盖：

/* 容器设置横向滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 1200px; /* 模拟宽表格 */
  border-collapse: collapse;
}

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

/* 第一列固定（按需调整） */
tr :nth-child(1) {
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 2;
}

/* 第二列固定 */
tr :nth-child(2) {
  position: sticky;
  left: 120px; /* 对应第一列的实际宽度，需自行调整 */
  background-color: #fff;
  z-index: 1;
}

/* 用伪元素生成右侧边框，避免被后续单元格覆盖 */
tr :nth-child(2)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background-color: black;
  z-index: 3; /* 确保边框层级最高 */
}

方案2：修改表格边框合并规则 #

将表格的border-collapse改为separate，让单元格边框独立显示，避免合并规则导致边框消失：

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

table {
  width: 1200px;
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格默认间距 */
}

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

tr :nth-child(2) {
  position: sticky;
  left: 120px; /* 对应第一列宽度 */
  background-color: #fff;
  border-right: 1px solid black;
}

关键注意点 #

• 必须给固定列设置background-color，避免滚动时后面的内容透显覆盖边框；
• 伪元素需设置为absolute定位，并绑定到固定列的right边缘；
• 通过z-index调整层级，确保边框和固定列的显示优先级高于后续单元格。

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