表格首列设置sticky后横向滚动右侧边框消失，如何解决？

当表格首列设置sticky粘性定位后，横向滚动时右侧边框消失，核心原因是表格使用border-collapse: collapse时，单元格边框处于合并状态，滚动时后续单元格会覆盖首列的右侧边框。以下是两种可行的解决方法：

方法一：用伪元素模拟右侧边框（推荐，无需改动表格边框模式） #

修改首列的CSS样式，通过伪元素生成独立的右侧边框，避免被其他单元格覆盖：

th:first-child,
td:first-child {
    position: -webkit-sticky; /* 兼容Safari */
    position: sticky;
    z-index: 1;
    left: 0;
    background: #fff;
    position: relative; /* 为伪元素提供定位基准 */
}

/* 生成右侧边框伪元素 */
th:first-child::after,
td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px; /* 抵消border-collapse带来的边框重叠 */
    height: 100%;
    width: 1px;
    background-color: #ddd;
    z-index: 2; /* 确保边框在其他单元格之上 */
}

方法二：修改表格边框为分离模式 #

将表格的border-collapse改为separate，通过分离边框避免覆盖问题：

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate; /* 改为分离边框模式 */
    border-spacing: 0; /* 消除单元格间距 */
}

th,
td {
    width: 20%;
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    border-right: none; /* 移除所有单元格默认右侧边框 */
}

/* 为最后一列恢复右侧边框 */
th:last-child,
td:last-child {
    border-right: 1px solid #ddd;
}

th:first-child,
td:first-child {
    position: -webkit-sticky; /* 兼容Safari */
    position: sticky;
    z-index: 1;
    left: 0;
    background: #fff;
    border-right: 1px solid #ddd; /* 为粘性首列添加右侧边框 */
}

两种方法都能确保横向滚动时首列右侧边框始终可见，方法一无需改动原有表格的边框合并设置，适配性更强。

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