html表格中无法真正锁定行样式，只能通过position:sticky（作用于th/td）或javascript模拟；tr不支持sticky，thead也不可靠；需满足overflow、top、无transform等前提；多行冻结需手动计算top值；双方向冻结应分层处理。

HTML 表格中无法真正“锁定”某一行的样式——你只能让某行在滚动时视觉上保持固定位置，本质是靠 position: sticky 或 JavaScript 模拟定位，不是样式本身被“锁住”。

为什么 <tr> 不能直接设 <code>position: sticky

浏览器规范明确不支持对 <tr> 元素使用 <code>position: sticky。哪怕写了也无效，尤其在 Chrome/Firefox/Safari 中会静默忽略。实测中设了 tr { position: sticky; top: 0; }，表头照样跟着滚走。

• 唯一被广泛支持的粘性元素是 <th> 和 <code><td>（单元格级） <li><code><thead> 也不能直接设 sticky：多数浏览器不识别，或触发错位、重绘异常 <li>想冻结整行？必须把该行里的每个 <code><th> 或 <code><td> 单独加 <code>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 事件动态控制位置：


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 把 <thead> 提到表格外，用 <code>position: absolute 定位，并同步 scrollTop
• 避免直接操作 top：用 transform: translateY() 性能更好，不触发重排
• 冻结列更麻烦——得克隆首列，用 JS 绑定 scrollLeft 并平移克隆列
• 注意：克隆方案会破坏语义和可访问性，屏幕阅读器可能读不出行列关系
• 轻量替代可考虑 floatThead（v2.2.2 版本仍稳定），但已停止维护，不建议新项目引入

双方向冻结（行+列）的现实约束

同时设 top 和 left 在 Safari 和部分移动端 WebKit 内核下极不稳定，容易只生效一个方向：

• 稳妥做法是分层：外层容器控垂直滚动（冻结行），内层再套一层控水平滚动（冻结列）
• 左上角那个单元格（如 <th>）需同时设 <code>top: 0; left: 0;，且 z-index 要高于其他 sticky 元素
• 务必禁用 border-collapse: collapse，改用 border-spacing: 0，否则 sticky 边框会错位
• 不要指望它在所有设备上像素级对齐——尤其是缩放或字体渲染差异大的场景，留出 1–2px 容错空间

真正难的从来不是写几行 CSS，而是处理列宽同步、滚动抖动、可访问性降级和老浏览器兜底——这些细节没压住，用户一滚动就露馅。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！