如何让表格边框位于背景线性/径向渐变（滚动阴影）的下层

核心问题说明 #

你当前设置的滚动阴影是.table容器的背景层，优先级低于表格行的border-bottom边框，所以阴影盖不住左右边缘的边框线。另外你原有CSS里存在语法错误：overflow-y = auto要改成overflow-x: auto，横向滚动对应属性是overflow-x，属性赋值用冒号而非等号。

可行解决方案 #

方案1：用容器伪元素覆盖左右边缘区域

给.table容器新增相对定位，再用两个绝对定位的伪元素固定在左右两侧，宽度和阴影宽度一致，层级高于表格内容，即可盖住边缘的边框：

/* 先修改原有.table的属性 */
.table {
  /* 保留原有其他属性 */
  overflow-x: auto; /* 修正原来的错误写法 */
  position: relative;
}

/* 新增伪元素样式 */
.table::before,
.table::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px; /* 和你设置的左右渐变阴影宽度一致 */
  z-index: 1;
  pointer-events: none; /* 不干扰表格内容的点击、滚动操作 */
}

.table::before {
  left: 0;
  background: linear-gradient(90deg, #fff, purple 33%, transparent);
}

.table::after {
  right: 0;
  background: linear-gradient(-90deg, #fff, purple 33%, transparent);
}

方案2：将行边框改为背景渐变实现，直接裁剪掉左右阴影区域的边框

去掉.tableRow的border-bottom属性，改用背景渐变绘制底部边框，直接把左右各30px的位置排除出边框显示范围：

.tableRow {
  /* 删掉原来的 border-bottom: 1px solid purple */
  background-image: linear-gradient(purple, purple);
  background-size: calc(100% - 60px) 1px; /* 左右各减去30px的阴影宽度 */
  background-position: 30px bottom; /* 从左侧30px位置开始显示边框 */
  background-repeat: no-repeat;
}

如果有固定表头的需求，第二种方案适配性更好，不会出现表头边框被遮挡的问题。两种方案都可以和你现有的滚动阴影效果无缝适配，不会出现视觉断层。

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