Bootstrap 5 表格首行冻结需对 <thead><tr> 或 <th> 使用 position: sticky; top: 0; z-index: 10，首列冻结则对首列 <th> 和 <td> 设 left: 0 并显式设背景色与 z-index；同时冻结时左上角单元格需 top: 0; left: 0; z-index: 3 且 Safari 需加 -webkit-transform: translateZ(0)；纯 CSS 方案不支持动态 DOM 变更与打印。
Bootstrap 5 表格首行冻结：用 position: sticky 实现
Bootstrap 5 的 .table 类本身不提供冻结行列能力，但现代浏览器（Chrome 56+、Firefox 41+、Safari 14.1+、Edge 79+）已原生支持 position: sticky，配合 Bootstrap 的语义化结构就能实现首行冻结——关键在于给 <thead> 内的 <th> 或 <tr> 正确设置 top 和 z-index。
常见错误是直接对 <thead> 设置 sticky，但该标签默认是 display: table-header-group，部分浏览器不支持对其设 sticky；必须下探到 <tr> 或 <th> 级别。
- 给
<thead><tr>添加类.sticky-top并手动指定top: 0（因为 Bootstrap 的.sticky-top默认作用于块级元素，对表格行需覆盖） - 确保父容器有明确高度且设置了
overflow-y: auto，否则滚动行为不触发 - 为避免表头被其他元素遮挡，给
<th>加z-index: 10（<thead>的z-index无效） - 如果表格在
.table-responsive容器内，冻结会失效——该容器使用overflow-x: auto，不触发垂直滚动，必须移除或改用自定义包裹容器
Bootstrap 5 表格首列冻结：position: sticky + 左侧偏移控制
首列冻结比首行更易出问题：需要同时处理列宽、边框、背景色继承，以及与首行冻结的叠加冲突。核心是给第一列所有 <th>（表头）和对应 <td>（数据行）统一加 position: sticky; left: 0;，并显式设置背景色防止滚动时透底。
注意 Bootstrap 的 .table-striped 依赖 :nth-child(even/odd)，而 sticky 元素脱离文档流后可能影响伪类计算，导致隔行变色错位；建议改用 .table-hover 或禁用条纹样式。
立即学习“前端免费学习笔记（深入）”；
- 给首列表头单元格加
left: 0; z-index: 2;，数据行首列单元格同样加left: 0; z-index: 1;（数值必须低于表头但高于普通单元格） - 必须设置
background-color（如background-color: #fff;），否则滚动时下方内容会从左侧“透上来” - 若使用
.table-bordered，需额外重置border-right防止冻结列右侧出现双线；例如：border-right: 1px solid #dee2e6; - 不要给整列用
<col>标签设样式——<col>不支持sticky，必须逐单元格控制
首行 + 首列同时冻结的兼容性陷阱
同时冻结首行和首列时，左上角单元格（<thead><tr><th>）会同时受 top: 0 和 left: 0 影响，此时 z-index 必须最高（如 z-index: 3），否则会被首行或首列覆盖。更大的问题是 Safari（≤16.4）对双重 sticky 支持不稳定，会出现闪烁或卡顿。
- 左上角单元格需同时声明：
top: 0; left: 0; z-index: 3; - Safari 用户需加
-webkit-transform: translateZ(0);强制硬件加速，缓解渲染抖动 - 当表格存在横向滚动时，冻结列的
left值要避开.table-responsive的 padding —— 推荐不用该类，改用自定义容器并设padding-right: 17px（预留滚动条宽度） - 如果表格启用了
.table-sm，记得同步调整top值（如top: -1px）避免表头与边框错位
不依赖 JavaScript 的纯 CSS 方案局限在哪
纯 CSS 冻结只适用于静态结构表格：一旦通过 JS 动态插入行、切换列显示/隐藏、或启用服务端分页（DOM 被整体替换），sticky 样式极易丢失，且无法响应内容高度变化自动调整 top/left 偏移。另外，打印样式表（@media print）中 sticky 完全失效，导出 PDF 时冻结效果不会保留。
真正需要稳定跨浏览器、支持动态操作的场景，比如后台数据管理页，还是得回到 fixedHeader + fixedColumns 这类 JS 插件（如 DataTables），或者用 grid-template-areas 拆解表格为独立区域——但那就不是“纯 CSS 表格”了。
