position: sticky 在原生表格中不生效，因 <tbody><tr> 非块级定位容器且浏览器支持不一；建议改用 div 模拟表格，通过 flex 布局+sticky+overflow-x: auto 实现固定列滚动。
为什么 position: sticky 在表格里不生效
因为原生 <table> 的渲染机制限制：sticky 要求父容器有明确的滚动上下文，而 <tbody> 和 <tr> 默认不是块级定位容器，且浏览器对 sticky 在 <td>/<th> 上的支持长期不一致（尤其 Safari 旧版本、IE 完全不支持）。直接给 <th> 加 position: sticky; left: 0; 很可能静默失效。
实操建议：
- 放弃原生
<table>结构，改用div模拟表格布局（语义弱但可控性强） - 若必须用
<table>，只在 Chrome/Firefox 最新版中测试sticky，并为第一列<th>和对应数据列<td>同时加position: sticky; left: 0;+background-color（遮盖右侧内容） - 务必给
<table>父容器设置overflow-x: auto，且该父容器不能是display: table或inline元素
用 div 实现固定列滚动的最小可行结构
核心是三层嵌套：外层容器控制横向滚动，中间层模拟 <thead> 并固定列，内层模拟 <tbody> 并允许滚动。关键在于列宽对齐和 sticky 的作用范围。
示例结构（仅关键样式）：
立即学习“前端免费学习笔记（深入）”；
<div class="table-wrapper">
<div class="table-header">
<div class="col fixed">ID</div>
<div class="col">Name</div>
<div class="col">Email</div>
</div>
<div class="table-body">
<div class="row">
<div class="col fixed">1</div>
<div class="col">Alice</div>
<div class="col">a@example.com</div>
</div>
</div>
</div>
<p><style>
.table-wrapper { overflow-x: auto; }
.table-header, .table-body { display: flex; }
.col { flex: 0 0 200px; } /<em> 所有列等宽，便于对齐 </em>/
.fixed { position: sticky; left: 0; background: white; z-index: 1; }
</style>注意：flex 布局下，sticky 对 left 生效的前提是父容器（.table-header / .table-body）宽度超出视口 —— 所以必须让它们内部总宽 > 外层 .table-wrapper 宽度（靠 flex 子项不换行实现）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
overflow-x: auto 不触发滚动？检查这三处
常见现象：内容明显溢出，但滚动条没出现，或只在部分浏览器出现。根本原因常是尺寸计算被隐藏的默认样式干扰。
排查清单：
-
.table-wrapper是否设置了white-space: nowrap？没有的话，div内容可能折行，导致总宽未超限 - 是否意外给
.table-header或.table-body设置了width: 100%？这会压制内部flex伸展，需改为min-width: max-content或显式设宽 - 是否有
box-sizing: border-box影响？确保所有.col的padding和border不额外撑宽（建议统一设box-sizing: border-box）
固定多列时 left 值怎么算
不能简单写 left: 0 和 left: 200px —— 因为 sticky 的 left 是相对于最近的滚动祖先的左边界，而多个 sticky 元素会相互覆盖。正确做法是让每列 sticky 元素的 left 累加其左侧所有固定列的宽度。
例如固定前两列（每列 200px）：
- 第一列：
left: 0 - 第二列：
left: 200px - 第三列（非固定）：
left: auto（不设）
更稳妥的方式是用 CSS 自定义属性动态控制：
.col:nth-child(1) { --fixed-offset: 0; }
.col:nth-child(2) { --fixed-offset: 200px; }
.col.fixed { left: var(--fixed-offset); }复杂点在于：一旦列宽响应式变化（如 @media），--fixed-offset 必须同步更新，否则错位。实际项目中，如果列数 > 2 或宽度不固定，建议用 JS 监听 resize 重算 left 值 —— 这是纯 CSS 方案容易忽略的硬伤。
