HTML表格中无法真正锁定行样式，只能通过position:sticky（作用于th/td）或JavaScript模拟；tr不支持sticky，thead也不可靠；需满足overflow、top、无transform等前提；多行冻结需手动计算top值；双方向冻结应分层处理。
HTML 表格中无法真正“锁定”某一行的样式——你只能让某行在滚动时视觉上保持固定位置，本质是靠 position: sticky 或 JavaScript 模拟定位，不是样式本身被“锁住”。
为什么 <tr> 不能直接设 position: sticky
浏览器规范明确不支持对 <tr> 元素使用 position: sticky。哪怕写了也无效，尤其在 Chrome/Firefox/Safari 中会静默忽略。实测中设了 tr { position: sticky; top: 0; }，表头照样跟着滚走。
- 唯一被广泛支持的粘性元素是
<th>和<td>（单元格级） -
<thead>也不能直接设 sticky：多数浏览器不识别，或触发错位、重绘异常 - 想冻结整行？必须把该行里的每个
<th>或<td>单独加position: sticky; top: Xpx; - 若需冻结多行（如前两行），第二行的
top值得手动计算：比如第一行高 42px，第二行就得设top: 42px
position: sticky 生效的硬性前提
缺一不可，漏一个就失效：
- 父容器必须有
overflow-y: auto或overflow: auto，且显式设了max-height或height - 粘性元素自身必须设
top（冻结行）或left（冻结列），不能只写position: sticky - 父容器不能有
transform、perspective、will-change等会创建新层叠上下文的属性 - 表格需用
table-layout: fixed+ 显式列宽（如th:nth-child(1) { min-width: 120px; }），否则滚动时列宽错位 -
background-color必须设（哪怕是#fff），否则 sticky 区域透明，底下内容透上来
IE/Edge ≤15 下必须退回到 JS 方案
这些浏览器完全不支持 position: sticky，强行用只会白屏或错位。此时只能监听 scroll 事件动态控制位置：
立即学习“前端免费学习笔记（深入）”；
- 把
<thead>提到表格外，用position: absolute定位，并同步scrollTop - 避免直接操作
top：用transform: translateY()性能更好，不触发重排 - 冻结列更麻烦——得克隆首列，用 JS 绑定
scrollLeft并平移克隆列 - 注意：克隆方案会破坏语义和可访问性，屏幕阅读器可能读不出行列关系
- 轻量替代可考虑
floatThead（v2.2.2 版本仍稳定），但已停止维护，不建议新项目引入
双方向冻结（行+列）的现实约束
同时设 top 和 left 在 Safari 和部分移动端 WebKit 内核下极不稳定，容易只生效一个方向：
- 稳妥做法是分层：外层容器控垂直滚动（冻结行），内层再套一层控水平滚动（冻结列）
- 左上角那个单元格（如
<th>）需同时设top: 0; left: 0;，且z-index要高于其他 sticky 元素 - 务必禁用
border-collapse: collapse，改用border-spacing: 0，否则 sticky 边框会错位 - 不要指望它在所有设备上像素级对齐——尤其是缩放或字体渲染差异大的场景，留出 1–2px 容错空间
真正难的从来不是写几行 CSS，而是处理列宽同步、滚动抖动、可访问性降级和老浏览器兜底——这些细节没压住，用户一滚动就露馅。
