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