因为原生渲染机制限制：与为独立渲染上下文，需父容器有明确高度且无transform/filter等层叠干扰；横向left: 0常无效，ie完全不支持；推荐display: grid替代或双层表格+js同步滚动。

为什么 position: sticky 在表格里经常失效？

因为原生 <table> 的渲染机制限制：<code><thead> 和 <code><tbody> 是独立的块级渲染上下文，<code>sticky 在 <th> 上生效的前提是其父容器有明确高度且未触发新的层叠上下文。多数情况下，<code><tbody> 滚动时，<code><thead> 并不随其滚动区域绑定——它被“钉”在 table 顶部，但横向滚动时，列头不会固定。<p>常见错误现象：<code>left: 0 对 <th> 无效；<code>sticky 只对垂直方向起作用；IE 完全不支持 sticky 表格单元格。

• 确保 <table> 外层包裹一个带 <code>overflow-x: auto 且设了 max-width 或固定宽度的容器
• <th> 必须同时设置 <code>position: sticky、left: 0（横向）或 top: 0（纵向），且不能有 transform、filter 等触发层叠上下文的属性
• 横向固定第一列时，所有后续 <th> 和 <code><td> 需设 <code>min-width，否则列宽塌缩导致错位

  用 display: grid 替代 <table> 实现真正双向固定<p>当兼容性允许（Chrome 68+、Firefox 62+、Safari 14.1+），<code>grid 是目前最可控的方案：把表头行、表头列、数据区拆成独立网格区域，用 grid-template-areas 精确控制定位，再对特定区域启用 position: sticky。

  关键点在于分离「冻结锚点」：左上角表头（行列交点）需单独一个单元格，它要同时响应 top 和 left；行头列需 sticky + left: 0；列头行需 sticky + top: 0。

  /* 示例结构：grid 容器内 */
  .container {
    display: grid;
    grid-template-areas:
      "corner header header header"
      "row1   cell1  cell2  cell3"
      "row2   cell4  cell5  cell6";
    overflow: auto;
  }
  .corner { grid-area: corner; position: sticky; top: 0; left: 0; z-index: 3; }
  .header { grid-area: header; position: sticky; top: 0; }
  .row1, .row2 { grid-area: row1 / row2; position: sticky; left: 0; }

  兼容老浏览器的双层表格嵌套方案

  IE11 或需要支持 Safari 12 的场景，只能放弃单表 DOM，改用三层嵌套：<div class="table-wrapper"> 包裹三个独立 <code><table>：左上角冻结区、左侧行头区、主数据区（含顶部列头）。靠 CSS 控制它们的滚动联动与对齐。<p>难点不在布局，而在同步滚动：监听主区域 <code>scrollLeft 和 scrollTop，手动设置左侧/顶部表格的 scrollLeft/scrollTop。必须节流，否则卡顿明显。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 主数据表设 overflow: auto，其余两个表设 overflow: hidden
  • 所有表格用相同 table-layout: fixed + 显式 width，否则列宽不同步
  • 行高必须统一（建议用 line-height + padding 控制，避免 height 导致跨浏览器差异）
  • JavaScript 同步时，优先用 requestAnimationFrame 而非 setTimeout，减少丢帧

  横向固定时，<colgroup></colgroup> 和 <col> 为什么不能替代 CSS 列宽？

  因为 <col> 只影响渲染初始宽度，不参与 sticky 定位计算，也不响应动态内容撑开。一旦某列内容变长，<col width="120"> 就失效，导致固定列与内容列错位。

  正确做法是：所有列（包括固定列）都用 CSS min-width + width（可选），并配合 white-space: nowrap 或 text-overflow: ellipsis 控制溢出。固定列的 width 必须显式设为像素值，百分比在 sticky 场景下不可靠。

  • 避免在固定列上使用 flex 或 inline-block 布局，会破坏表格语义和对齐
  • 如果列内容是数字或短文本，width: 100px 比 min-width: 100px 更稳；长文本则必须加 overflow: hidden
  • 用 getBoundingClientRect() 校验实际列宽是否一致，尤其在动态插入行后

  双向固定的真正复杂点不在“怎么写”，而在“怎么保持列宽和行高在各种缩放、字体加载、异步内容插入后依然对齐”。多数线上问题都出在这里，而不是 sticky 本身。