position: sticky在表格中常失效，因渲染模型特殊，/的sticky被/截断；需设父容器overflow-x:auto、固定列加left:0+background-color、统一列宽，并避免嵌套flex/grid。
为什么 position: sticky 在表格里经常失效
因为 <table> 的渲染模型特殊，<code>sticky 需要一个有明确滚动上下文的「最近的可滚动祖先」，而默认情况下 <table> 本身不创建新的层叠上下文或块格式化上下文，<code><th> 或 <code><td> 的 <code>sticky 行为会被 <tbody> 或 <code><thead> 截断。常见现象是：左侧列看似固定了，但横向滚动时突然跳动或完全不固定。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>必须给 <code><table> 父容器（比如 <code><div class="table-container">）设置 <code>overflow-x: auto，且该容器需有明确宽度（不能依赖内容撑开）
<th> 和 <code><td> 中需要固定的列，统一加 <code>position: sticky; left: 0;，同时设 background-color 避免滚动时文字透底
min-width 或 width，否则在缩放或字体变化时容易错位<th> 里嵌套 Flex/Grid 布局——会破坏 <code>sticky 的计算基准
用 display: grid 模拟表格结构实现真·固定左列
当原生 <table> 路径走不通（比如需要复杂合并单元格 + 固定列共存），直接放弃 <code><table> 标签，改用 <code>grid 手动布局更可控。核心思路是把每行拆成「固定区 + 可滚动区」两个网格区域。
实操建议：
- 外层
<div class="grid-table"> 设 <code>display: grid; grid-template-columns: 120px 1fr;（第一列宽固定，其余自适应） - 每行用
<div class="row"> 包裹，内部两个子元素：<code><div class="fixed-col"> 和 <code><div class="scroll-col"> <li> <code>.scroll-col内部再套一层<div class="inner-scroll"> 并设 <code>overflow-x: auto; white-space: nowrap;，让内容横向可滚 - 注意
grid下的border-collapse效果需手动用border+margin模拟，尤其表头对齐容易偏移 - 固定列表格用
position: absolute+top: 0+left: 0，并确保父容器position: relative - 滚动表格设
margin-left: [固定列宽]，避免遮挡 - 同步逻辑不要直接赋值
scrollLeft，而是用requestAnimationFrame节流，否则在快速拖拽时会卡顿 - 务必监听
resize事件重算列宽，特别是当用户调整浏览器窗口或字体缩放时 - 统一在
<colgroup></colgroup>中定义所有列宽，例如：<colgroup> <col width="120"> <col width="200"> <col width="*"> </colgroup>
- 避免在
<th> 或 <code><td> 上用 <code>min-width/max-width覆盖<col>，这会导致渲染顺序冲突 - 如果用了
grid方案，表头和数据行必须共用同一套grid-template-columns，不能一个写120px 1fr，另一个写120px minmax(0,1fr)
IE11 兼容场景下只能靠 JavaScript 滚动同步
sticky 在 IE11 完全不支持，grid 也仅部分支持（无 subgrid、gap 不稳定），此时唯一可靠方案是双表格 DOM + scrollLeft 同步。即一个只含左列的 <table>（固定定位），另一个含其余列的 <code><table>（横向滚动），监听后者滚动事件，动态设置前者 <code>top 值。
实操建议：
固定列后表头与数据行错位怎么调
最常被忽略的是 <thead> 和 <code><tbody> 内各列的 <code>width 必须严格一致，哪怕用了 sticky 或 grid。浏览器对表格列宽的计算是独立进行的，<thead> 里某列设了 <code>width: 100px，<tbody> 里同列若没设或设成 <code>auto，就会错位。
实操建议：
固定列真正难的不是“怎么让它不动”，而是“怎么让它不动得和其他列严丝合缝”。宽度、滚动上下文、渲染层叠顺序，三者只要一个没对齐，视觉上就露馅。
