溢出容器内表格如何同时实现tbody滚动与首列th、td粘性固定

问题根因 #

position: sticky的定位上下文是最近的设置了overflow属性的祖先元素。你当前的代码中tbody设置了overflow-y，会成为粘性列的定位参考，但水平滚动是在table元素上，tbody整体会跟着table水平移动，导致内部td的sticky定位失效。

解决方案 #

方案1：统一滚动容器到外层div（最推荐，无列宽错位问题） #

不要拆分thead、tbody为块级元素，利用原生table的自动列宽对齐能力，把水平、垂直滚动都交给外层的fixed-scrollbar容器，修改后的CSS如下：

/* 外层容器做统一滚动 */
.fixed-scrollbar {
  overflow: auto; /* 同时支持水平+垂直滚动 */
  max-height: 485px; /* 原tbody的高度限制移到此处 */
  position: relative;
}

table {
  text-align: center;
  width: max-content; /* 保证表格内容不被压缩，宽度自适应 */
  border-collapse: collapse;
  /* 移除原有的display:block、overflow-x属性 */
}

/* 表头粘性定位，垂直滚动时吸顶 */
thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

td, th {
  min-width: 150px;
}
.check{
  min-width:20px;
}
.stick-column{
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: #ffff !important;
  z-index: 11; /* 层级比普通表头高，交叉时覆盖表头 */
}

/* 移除原有的thead、tbody display:block配置，移除tbody的overflow相关配置 */

该方案无需手动同步列宽，原生table布局自动对齐，表头吸顶、列吸左效果可以同时生效，你的任意列粘性JS逻辑可以直接适配，只需要按列宽累加设置对应列的left值即可。

方案2：保留tbody单独垂直滚动的适配方案 #

如果业务要求必须单独控制tbody的垂直滚动，需要手动同步thead、tbody的每一列宽度，修改后的CSS如下：

.fixed-scrollbar {
  overflow-x: auto; /* 水平滚动移到外层容器 */
  position: relative;
}

table {
  text-align: center;
  width: 100%;
  table-layout: fixed; /* 开启固定列宽模式，配合手动设置列宽对齐 */
  /* 移除原有的overflow-x属性 */
}

thead, tbody {
  display: block;
}

tbody {
  overflow-y: scroll; 
  height: 485px;
  /* 移除原有的overflow-x: hidden属性 */
}

td, th {
  min-width: 150px;
  width: 150px; /* 固定每列宽度，手动对齐thead、tbody */
}
.check{
  min-width:20px;
  width: 20px;
}

.stick-column{
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: #ffff !important;
}
/* 左上角交叉单元格层级最高，同时适配吸顶+吸左 */
thead .stick-column {
  z-index: 12;
  top: 0;
}
tbody .stick-column {
  z-index: 11;
}

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