用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>或第一行<tr>设置position: sticky; top: 0; - 确保
<table>或其滚动容器（如外层<div>）设置了overflow-y: auto，且高度固定 - 为避免边框重叠，给
<thead>加background: white;和z-index: 1; - 如果表格用了
border-collapse: collapse，sticky 行的 border 可能错位，建议改用border-collapse: separate或单独控制边框
当需要兼容 IE 或复杂多级表头时，得用绝对定位 + JS 同步
IE 完全不支持 position: sticky，而多层表头（比如合并单元格 + 分组标题）也超出了 sticky 的能力范围。这时只能靠外层容器相对定位 + position: absolute 模拟冻结，并用 scroll 事件监听同步偏移。
但要注意：纯 CSS 方案在此场景下不可行，JS 必须介入，且要节流（推荐 requestAnimationFrame），否则滚动卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 把
<thead>提到表格外部，包裹进一个与表格同宽的<div class="frozen-header"> - 表格本身设
margin-top: [thead高度]px，腾出空间 - 监听容器
scroll，动态设置frozen-header的transform: translateY(...)（比修改top性能更好） - 若表格列宽是百分比或自动，需在 resize 和内容变化后重新测量列宽，手动同步到 frozen-header 中的
<th>
overflow-x: auto 横向滚动时，冻结列怎么处理？
横向滚动下冻结首列，逻辑和冻结首行一致，但要用 left 而非 top。问题在于：position: sticky 对 left 的支持更晚（Safari 直到 15.4 才稳定），且和 overflow-x 共存时容易触发渲染 bug。
- 冻结第一列：给
<th>或<td>设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> 设 height + overflow: auto，再对 <thead> 用 position: absolute。这看似可行，但一旦表格有 colspan/rowspan，绝对定位的表头就再也对不齐了。
真正难的不是让某一行“不动”，而是让它在所有缩放、字体加载、动态内容插入、不同设备 DPI 下，都严丝合缝地贴住下方数据列——这点上，sticky 是目前唯一接近可靠的原生方案。
