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