粘性表头实现：能否设置tableWrapper的overflow-x:auto且overflow-y:unset

1. 属性组合兼容性说明 #

overflow-x: auto 搭配 overflow-y: unset 的组合本身是支持的，但你观察到的属性覆盖现象是CSS规范定义的默认行为：

若overflow-x和overflow-y其中一个的计算值不为visible，另一个的计算值为visible，浏览器会自动将值为visible的属性隐式转换为auto。

你设置overflow-y: unset时，unset对于overflow属性等价于初始值visible，因此当overflow-x设为auto后，overflow-y会被自动转为auto，导致两个方向的滚动控制权都转移到了tableWrapper上。

2. 实现方案 #

保留现有HTML结构不变，调整CSS即可同时实现粘性表头、tableWrapper控制水平滚动、父容器控制垂直滚动的需求：

.sticky-header {
  z-index: 7;
  position: sticky;
  top: 0px;
  background: #ffffff; /* 必须加背景，避免滚动时tbody内容透到表头上方 */
}

.parentWrapper {
  position: relative;
  overflow: auto;
  height: 100%;
  width: 100%;
  max-height: 300px;
}

.tableWrapper {
  overflow-x: auto;
  position: relative;
  max-width: 600px; /* 按需设置水平最大宽度，超出后自动出现水平滚动条 */
}

/* 可选配置：如果需要强制表格宽度超出容器触发水平滚动 */
table {
  min-width: 800px;
  width: 100%;
  border-collapse: collapse;
}

实现效果说明 #

• 表格宽度超过tableWrapper的max-width时，tableWrapper底部会出现水平滚动条，滚动时表头和表格内容同步左右移动
• 垂直滚动由parentWrapper控制，滚动时表头固定在parentWrapper的顶部，直到整个表格完全滚出视口
• 不需要为tableWrapper设置高度相关属性，其高度默认由内部表格内容撑开，不会出现垂直滚动条

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