position: sticky固定表头失效的三个硬性前提是：容器需设height/max-height并配overflow-y:auto；祖先元素不能有overflow:hidden等截断属性；table必须设table-layout:fixed且列宽须显式声明。

position: sticky 固定表头失效的三个硬性前提

直接写 position: sticky; top: 0 却没反应？不是 CSS 写错了，而是漏掉了以下任一条件都会退化为普通定位：

• table 或其滚动容器必须显式设置 height 或 max-height，且搭配 overflow-y: auto
• 祖先元素不能有 overflow: hidden、overflow: clip 等截断行为的属性，否则粘性被强制“剪掉”
• table 必须设 table-layout: fixed，且至少一列通过 或 显式声明宽度； 上禁用 white-space: nowrap

  固定左侧列时 left 值怎么算才对齐

  固定第 1 列用 left: 0 没问题，但固定第 2 列不能简单写 left: 100px——它得是前 N 列（含边框）的**累积视觉宽度**：

  • 先确认每列实际渲染宽度：用浏览器 DevTools 的 computed 面板看 offsetWidth，不是 CSS 中写的 width
  • 若第 1 列内容撑开到 132px，边框各 1px，那么第 2 列的 left 至少是 134px（132 + 左右 border）
  • 多列固定时，z-index 必须递增：第 1 列 z-index: 2，第 2 列 z-index: 3，否则后列会被前列遮挡
  • 所有固定列单元格（包括 和 中的）都需加 background-color，否则滚动时露出下方内容

    同时固定表头和列时的层级陷阱

    表头左上角那个单元格最容易出问题：它既要 top: 0 又要 left: 0，但 z-index 若没压住其他固定单元格，就会出现“表头列被 tbody 列盖住”或“列头被表头盖住”的错层。

    

    DeepBI DHTML 页面生成器

    生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

    下载
    • th:first-child 必须同时设 top: 0、left: 0、z-index: 10
    • th:first-child 只设 left: 0 和 z-index: 5，不加 top——否则会脱离正常文档流位置，导致行高错乱
    • 避免给整个 或 设 position，只作用于具体单元格
    • Chrome 和 Safari 对 sticky 同时应用 top + left 的支持较稳，Firefox 在某些嵌套场景下会偶发失效，建议加 will-change: transform 提前提示渲染引擎

    移动端 iOS 滚动卡顿与横向滑动盲区

    在 iPhone 上表格左右拖不动？不是性能问题，是滚动机制被默认禁用了惯性：

    • 外层容器必须加 -webkit-overflow-scrolling: touch，否则 iOS WebKit 不启用原生滚动加速
    • 固定列的 left 值若用百分比（如 left: 15%），在横屏切换时会错位，一律改用像素值或 calc() 动态计算
    • 用户找不到滑动入口？给容器加 padding-bottom: 1px 或 border-bottom: 1px solid transparent，触发 iOS 的“可滚动区域感知”
    • 若表格列数超过 6，别硬撑 结构——
      + display: grid 更可控，只是导出 Excel 需额外处理

      固定列与表头真正难的不是写法，是宽度对齐和滚动上下文的隐式依赖。哪怕所有 CSS 都写对了，只要父容器高度没设、或者某层祖先悄悄加了 overflow: hidden，整个 sticky 就静默失效。调试时优先检查 computed 样式里的 position 是否真为 sticky，而不是回退成 static。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！