用position: sticky冻结表头最直接，需设top: 0、父容器overflow-y: auto且高度固定、thead加background和z-index；ie等不支持时须降级为js+absolute模拟。
用 position: sticky 冻结表头最直接
只要浏览器支持（Chrome 56+、Firefox 59+、Safari 14.1+），position: sticky 是实现首行冻结最轻量、最符合语义的方案。它不脱离文档流，不影响表格结构，也不需要 JS 计算滚动位置。
关键点在于：top 值必须设为具体数值（比如 0），且父容器不能有 overflow: hidden 或 overflow: clip，否则 sticky 会失效。
- 给
<thead> 或第一行 <code><tr> 设置 <code>position: sticky; top: 0; - 确保
<table> 或其滚动容器（如外层 <code><div>）设置了 <code>overflow-y: auto，且高度固定 - 为避免边框重叠，给
<thead> 加 <code>background: white;和z-index: 1; - 如果表格用了
border-collapse: collapse，sticky 行的 border 可能错位，建议改用border-collapse: separate或单独控制边框 - 把
<thead> 提到表格外部，包裹进一个与表格同宽的 <code><div class="frozen-header"> <li>表格本身设 <code>margin-top: [thead高度]px，腾出空间 - 监听容器
scroll，动态设置frozen-header的transform: translateY(...)（比修改top性能更好） - 若表格列宽是百分比或自动，需在 resize 和内容变化后重新测量列宽，手动同步到 frozen-header 中的
<th> <h3> <code>overflow-x: auto横向滚动时，冻结列怎么处理？横向滚动下冻结首列，逻辑和冻结首行一致，但要用
left而非top。问题在于：position: sticky对left的支持更晚（Safari 直到 15.4 才稳定），且和overflow-x共存时容易触发渲染 bug。- 冻结第一列：给
<th> 或 <code><td> 设 <code>position: sticky; left: 0; background: white; z-index: 2; - 必须配合
white-space: nowrap和明确的最小宽度，防止列被压缩导致 sticky 失效 - 若同时冻结首行和首列，两个 sticky 元素会相互遮挡，需用
z-index显式分层（例如表头单元格z-index: 3，首列单元格z-index: 2） - 部分安卓 WebView 仍存在 sticky left 抖动问题，稳妥起见可降级为 JS 控制
transform: translateX
为什么不用
position: fixed？position: fixed看似简单，但它完全脱离文档流，会导致三个硬伤：列宽无法跟随表格自动对齐、无法响应表格内 padding/border 变化、滚动时出现像素级错位（尤其缩放或高清屏）。实际项目中几乎没人用它做表格冻结——除非整个表格是固定尺寸且列宽写死。另一个常见误区是给
<tbody> 设 <code>height+overflow: auto，再对<thead> 用 <code>position: absolute。这看似可行，但一旦表格有 colspan/rowspan，绝对定位的表头就再也对不齐了。真正难的不是让某一行“不动”，而是让它在所有缩放、字体加载、动态内容插入、不同设备 DPI 下，都严丝合缝地贴住下方数据列——这点上，
sticky是目前唯一接近可靠的原生方案。 - 冻结第一列：给
当需要兼容 IE 或复杂多级表头时，得用绝对定位 + JS 同步
IE 完全不支持 position: sticky，而多层表头（比如合并单元格 + 分组标题）也超出了 sticky 的能力范围。这时只能靠外层容器相对定位 + position: absolute 模拟冻结，并用 scroll 事件监听同步偏移。
但要注意：纯 CSS 方案在此场景下不可行，JS 必须介入，且要节流（推荐 requestAnimationFrame），否则滚动卡顿明显。
