position: sticky 是实现表头固定的最轻量方案，需设置 top: 0、避免父容器 overflow/transform、补 background 和 z-index；兼容旧浏览器需 JS 模拟，并注意列宽同步与移动端性能优化。
用 position: sticky 实现表头固定最直接
现代浏览器（chrome 56+、firefox 59+、safari 10.1+）原生支持 position: sticky，对 <th> 或 <thead> 元素设置 top: 0 就能实现滚动时表头吸附顶部。不需要 js、不干扰语义结构，是当前最轻量可靠的方案。
常见错误现象：position: sticky 不生效，表头依然随内容滚动消失。原因通常是父容器设置了 overflow: hidden、overflow: auto 或 transform，或者没有给 th 明确的 top 值。
- 确保
<th>的父元素（如<thead>）没有overflow裁剪，且祖先链上无transform、filter、perspective等创建新层叠上下文的属性 - 给
th设置position: sticky; top: 0;，并补上background（否则滚动时文字可能被下方内容穿透显示） - 若表格在
flex或grid容器中，需确认该容器未限制子项的定位行为（例如align-items: start可能影响）
th {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
IE 或老版本 Safari 必须降级用 JS 模拟
position: sticky 在 IE 完全不支持，Safari 10.0 及更早版本也不支持。如果项目仍需兼容这些环境，就得用 JS 监听滚动、动态计算 top 值或复制表头 DOM。
使用场景：企业内网系统、政府旧版浏览器环境、或明确要求支持 IE11 的项目。
- 不要用
fixed+ 绝对定位硬套——列宽会失准，尤其是有width: auto或内容撑开的列 - 推荐监听容器滚动而非
window，避免表格不在视口顶部时定位偏移 - 每次滚动都重算表头位置性能差，应加
requestAnimationFrame节流，且只在表格进入/离开视口时才激活监听
简单示意逻辑：scrollContainer.addEventListener('scroll', () => requestAnimationFrame(updateStickyHeader))，其中 updateStickyHeader 读取 scrollContainer.scrollTop 并更新克隆表头的 top 值。
列宽不同步是 sticky 表头最常被忽略的问题
当表格内容列宽由内容撑开（比如长文本、图片），而 thead th 和 tbody td 没有显式宽度约束时，sticky 后的表头列宽极易和下面内容错位。这不是 bug，是 CSS 表格渲染机制决定的：sticky 元素脱离文档流后，其列宽不再参与表格自动对齐计算。
- 给所有
th和td设置相同的min-width或width（推荐用min-width，兼顾响应性） - 用
table-layout: fixed强制表格按第一行宽度计算，但会牺牲内容自适应能力——适合列数固定、字段长度可控的后台列表 - 避免在
th上设white-space: nowrap而td不设，这会导致列宽计算不一致
一个有效折中：th, td { min-width: 120px; } + th { width: 1%; }（让表头尽可能收缩，靠 min-width 保底线）。
移动端 touch 滚动下 sticky 表头容易卡顿或失效
Safari iOS 和部分安卓 WebView 对 position: sticky 的优化较弱，尤其在快速滑动或表格高度较大时，表头可能出现跳动、延迟吸附甚至完全不 sticky。
性能影响：sticky 元素在滚动中频繁重绘，若表头内含阴影、渐变、复杂 border，或表格行数超百，卡顿概率显著上升。
- 精简表头样式：去掉
box-shadow、background-image、多层border，用纯色背景 + 单边线 - 避免在
th内嵌套过多 DOM，一个span包文字足矣；图标尽量用伪元素或 SVG 内联，而非<img> - 真遇到卡顿又无法降级 JS 方案时，可尝试加
will-change: transform到th，但仅限必要列，且记得滚动结束后移除
这事没银弹。越追求视觉还原，越容易掉进渲染陷阱；越想稳，越得接受一点样式妥协。
