position: absolute 不适合固定表格首列，因其会使单元格脱离表格流，破坏列宽计算、行高对齐、语义结构及可访问性，导致重叠、错位、z-index失效、滚动消失等问题；推荐使用 position: sticky 配合外层 overflow-x: auto 和一致列宽实现原生、语义化、可访问的固定效果。
为什么 position: absolute 不适合固定 HTML 表格首列
直接对 <td> 或 <th> 使用 position: absolute 会导致该单元格脱离表格流，破坏 <table> 的自动列宽计算、行高对齐和语义结构。浏览器会忽略它在原 <tr> 中的逻辑位置，后续单元格不会“填补空缺”，反而可能重叠或错位。更严重的是，屏幕阅读器无法正确识别这种脱离语义的布局，可访问性直接失效。
常见错误现象包括：z-index 失效、横向滚动时固定列“消失”、打印样式错乱、colspan/rowspan 行为异常。
真正可行的替代方案：用两个 <table> + position: sticky
position: sticky 是目前唯一原生支持、无需 JS、语义完整且可访问的首列固定方式。但注意：它必须作用在 <th> 或 <td> 上，且父容器（<thead> / <tbody>）需有明确的 overflow-x: auto 包裹，同时不能有 transform、filter 等创建新层叠上下文的属性干扰。
- 首列单元格加
position: sticky; left: 0; background: white; z-index: 1; - 整个表格外层用
<div style="overflow-x: auto;">包裹 - 确保
<th>和对应<td>的width或min-width一致，否则列宽会错位 - 避免给
<table>设置table-layout: fixed后又依赖内容撑宽 —— 这会让sticky列宽度失控
如果必须用绝对定位：只用于视觉层，不碰语义结构
极少数场景（如遗留系统强约束、Canvas 渲染层叠加），可用绝对定位仅作“视觉蒙版”，但原表格仍需完整渲染并隐藏（visibility: hidden 或 opacity: 0），再用绝对定位元素按坐标逐个复制首列内容。此时：
立即学习“前端免费学习笔记（深入）”；
- 必须监听
scroll和resize事件，手动同步滚动偏移和列宽 - 每个固定单元格需设置
top基于getBoundingClientRect().top动态计算，不能写死 - 焦点管理、键盘导航（
Tab）、aria-rowindex都得额外补全，否则残障用户无法操作 - 性能敏感：每帧都触发 layout，滚动卡顿明显，尤其在长表（>100 行）中
容易被忽略的关键细节
即使用了 position: sticky，以下三点仍常导致失败：
-
<table>父级若设置了display: inline-block或float，会截断sticky的锚定上下文 - Chrome 120+ 对
sticky在<tbody>内的兼容有细微变化，建议将sticky直接加在<th>和第一列所有<td>上，而非包裹容器 - 导出 Excel 时，
sticky列不会“固定”，需后端或 JS 库（如 SheetJS）单独处理冻结列逻辑
