使用 position: sticky 可能无效，因为表格子元素的定位上下文不被标准支持。推荐使用 display: table 模拟的表格布局。使用 display: table 实现 s
ticky 效果
通过将容器设为 display: table，行设为 display: table-row，单元格设为 display: table-cell，可以更灵活地应用 sticky 定位。
示例：固定表头
.container {
display: block;
max-height: 400px;
overflow-y: auto;
}
.table {
display: table;
width: 100%;
}
.header-row, .data-row {
display: table-row;
}
.header-cell {
display: table-cell;
position: sticky;
top: 0;
background: #f0f0f0;
border-bottom: 2px solid #333;
}
.data-cell {
display: table-cell;
padding: 8px;
border: 1px solid #ccc;
}
HTML结构：
姓名
年龄
张三
25
此时，.header-row 中的每个 .header-cell 都会因 top: 0 和 position: sticky 在滚动时停留在顶部。
固定左侧列的技巧
若想固定第一列，可对第一列的每个单元格设置：
.sticky-cell {
position: sticky;
left: 0;
background: white;
z-index: 1;
}
确保表格容器有横向滚动，并且每一行的该单元格都设置了相同的 left 值。由于每行独立，sticky 列会在水平滚动时保持可见。
关键点总结：
- 原生 table 标签内直接使用 sticky 支持差，建议用 CSS 模拟表格
- 容器必须可滚动（设置
overflow）
- sticky 元素必须有
top 或 left 才会生效
- z-index 可避免背景重叠问题
基本上就这些，不复杂但容易忽略细节。
ticky 效果