sticky在表格中失效的根本原因不是浏览器兼容性问题，而是原生表格元素（table、tbody、tr）不参与CSS定位上下文计算，导致写在th/td上的position: sticky被浏览器直接忽略；唯一可靠解法是脱离原生表格渲染流，用display: block+flex模拟表头并确保sticky元素为滚动容器直系子元素。
sticky在表格中失效，根本不是浏览器兼容性问题
绝大多数“特定浏览器中 sticky 失效”的报错，其实和浏览器版本无关——position: sticky 在 Chrome 56+、Firefox 59+、Safari 15.4+、Edge 16+ 均已原生支持。真正的问题是：你把 sticky 写在了 <th> 或 <td> 上，而它们的父级是 <tr> → <thead> → <table> 这条链，而 <table> 及其内部元素（<tbody>、<tr>）**不参与常规 CSS 定位上下文计算**，浏览器直接忽略 position: sticky 声明。
这不是 bug，是规范行为。哪怕你在 Safari 16.6 里写 th { position: sticky; top: 0; }，只要结构是原生表格，它就无效。
- 用 DevTools 检查 computed 样式，会发现
position显示为static（已被重置） - 即使加了
z-index、background，也救不回来——定位类型都没生效 - 别急着查 caniuse，先确认你是不是在跟
<table>硬刚
修复 sticky 表头：必须脱离原生表格渲染流
让 sticky 生效的唯一可靠路径，是把表头从 <thead> 里“拎出来”，放到一个普通块级容器中，并让它成为滚动容器的直系子元素。
- 外层容器设
overflow-y: auto且有明确高度（如max-height: 400px） -
<thead>改用display: block，内部<tr>改用display: flex -
<th>直接设position: sticky; top: 0; z-index: 10;（z-index必须显式大于 tbody 内容） - 确保
flex子项宽度可控（用flex: 1或固定width），否则列宽会塌缩或溢出
示例关键样式：
立即学习“前端免费学习笔记（深入）”；
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
.table-wrapper thead {
display: block;
}
.table-wrapper thead tr {
display: flex;
background: #f8f9fa;
}
.table-wrapper th {
flex: 1;
position: sticky;
top: 0;
z-index: 10;
background: #e9ecef;
}
.table-wrapper tbody {
display: block;
}
sticky 列固定失效：table-layout 和 left 值必须协同
实现首列固定（left: 0）时，常见“第二列盖住第一列”或“滚动后错位”，核心原因是表格列宽未锁定，导致 left: 0 的基准偏移。
- 必须给
<table>加table-layout: fixed，否则列宽由内容撑开，sticky 计算失准 -
th:first-child, td:first-child都要设position: sticky; left: 0; z-index: 10;（不能只设<th>） - 避免在固定列内用
display: flex或inline-block—— 会破坏table-cell的宽度继承逻辑 - 如果用了
border-collapse: collapse，记得给th:first-child单独加border-right，否则右侧边框会消失
移动端 Safari 15.4 之前的老版本怎么办
Safari ≤15.3 对 display: table + sticky 组合支持极弱，即使结构正确也会闪动或卡死。这时不要硬扛 CSS，换策略：
- 检测
!window.CSS?.supports('position', 'sticky')，不支持时降级为 JS 方案 - 监听
scroll或scrollLeft，用transform: translateX(0)模拟固定列（注意性能，加will-change: transform） - 轻量替代库如
sticky-table-headers（仅 2KB）比自己写 scroll handler 更稳 - 绝对不要用
position: fixed模拟——它脱离文档流，无法对齐列宽，响应式下必然错位
真正麻烦的从来不是浏览器差异，而是试图在表格语义结构里塞进块级定位逻辑。能不用原生 <table> 就不用，用 div + display: grid 或 flex 控制力更强，sticky 行为也更可预测。
