HTML表格冻结第一行最简可靠方案是为<th>设置position: sticky; top: 0;，需包裹在overflow-y: auto且定高的<div>容器中，并规范使用<thead>、显式控制列宽；不能作用于<thead>本身，因浏览器不支持其sticky特性。
HTML表格怎么冻结第一行（thead）
纯HTML本身不支持冻结行列，必须靠CSS配合滚动容器实现。冻结表头最常用方案是把 <thead> 单独设为固定定位，或用 position: sticky —— 后者更简洁、兼容性也够用（Chrome 56+、Firefox 59+、Safari 10.1+、Edge 16+）。
关键点：sticky 必须配合 top 值，且父容器不能是 overflow: hidden 或 transform 触发的层叠上下文，否则失效。
-
<thead>内每个<th>都要加position: sticky; top: 0;，别只加在<thead>上 - 给
<tbody>设置固定高度并启用垂直滚动：max-height: 400px; overflow-y: auto; - 如果列宽不一致，冻结后可能错位，建议给所有
<th>和<td>设定明确的width或用table-layout: fixed;
怎么同时冻结第一行和第一列
双方向冻结需要嵌套滚动容器 + 多重 sticky 控制，但浏览器对 left + top 同时生效的支持较脆弱，尤其在 Safari 中容易失效。稳妥做法是：外层控制垂直滚动（冻结行），内层控制水平滚动（冻结列），且左上角单元格需双重 sticky。
- 给第一列的每个
<th>和<td>加position: sticky; left: 0; background: white; z-index: 2; - 第一行的
<th>保持top: 0;，左上角单元格（<thead><tr><th>）额外加left: 0; - 整个表格父容器设
overflow: auto;，<tbody>不再单独设高，由外层统一裁剪 - 必须避免
border-collapse: collapse，它会干扰sticky边界计算；改用border-spacing: 0;+ 单独边框
IE11 或老版本 Edge 怎么办
position: sticky 在 IE 完全不支持，老 Edge（≤15）也不行。此时只能用 JavaScript 模拟，或者退化为「固定表头 + 表格分块」—— 把 <thead> 提到表格外，用 JS 同步滚动位置。
立即学习“前端免费学习笔记（深入）”；
- 推荐轻量库
floatThead（注意：已停止维护，但 v2.2.2 仍稳定），初始化只需：$('table').floatThead(); - 自己手写时，监听
scroll事件，读取scrollTop，动态设置<thead>的transform: translateY(...)，并确保<thead>脱离文档流（position: absolute） - 冻结列在 IE 下几乎无法可靠实现，建议降级为横向滚动提示（如加阴影、箭头图标），或改用列可拖拽/隐藏的交互替代
为什么表格滚动卡顿或错位
常见原因不是代码写错，而是布局触发了过多重排或 GPU 合成异常。尤其是 sticky 元素在频繁滚动时，若存在 box-shadow、filter、或父级有 transform，就会掉帧。
- 移除冻结区域上的
box-shadow、text-shadow、filter - 确保
<table>父容器没有transform、perspective、will-change等属性 - 在 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，看是否整行重绘；若有，说明
background-color未设或透明，导致层合成失败 - 移动端 Safari 对
sticky表格支持不稳定，建议加-webkit-overflow-scrolling: touch;到滚动容器
冻结行列看着简单，实际是 CSS 层叠上下文、滚动机制、渲染管线三者咬合的结果。最容易被忽略的是父容器的溢出设置和层叠上下文污染——哪怕只多一个 transform: translateZ(0)，sticky 就可能彻底失灵。
