position: sticky 不能直接固定 ，因其 display 为 table-header-group，不被 CSS 规范支持；必须作用于 或 ，并配合 table-layout: fixed、显式列宽、bg-white 和 z-50 才能正确生效。

position: sticky 能直接固定表头，但对 或纯文本区域无效——它只作用于表格单元格（/），不是通用滚动容器方案。

为什么 加 position: sticky 没反应

根本不是浏览器不支持，而是 的 display 是 table-header-group，CSS 规范明确不支持 sticky 定位。生效对象必须是 或 这类“可定位单元格”。

• 错误写法： —— 完全无效
• 正确写法：把 position: sticky; top: 0 加到每个 上
• Firefox v90 及更早版本对 上的 sticky 支持不稳定，v91+ 才推荐直接用
• iOS Safari 需额外加 width（如 width: 20%）或 transform: translateZ(0)，否则列宽计算错位

加了 sticky 却被遮住或透底

只写 position: sticky; top: 0 远远不够。缺一不可的三项是：background-color、z-index、滚动容器配置。

• background-color 必须显式设置（如 #fff），不能是 transparent 或未声明，否则滚动时文字被下方 内容透出
• z-index 至少为 10（推荐 10 起步），尤其当表格在 Modal、Tooltip 等层叠环境中时必须显式设值
• 建议加 border-bottom: 1px solid #ddd，否则表头和第一行数据之间容易视觉断裂
• 若用了 border-collapse: collapse， 需额外加 background-clip: padding-box 防止边框裁剪异常

  表格列宽错位、 和 对不齐

  这不是 bug，是表格默认按内容自适应宽度导致的渲染不同步。sticky 的 和滚动中的 分属不同渲染阶段，宽度没绑定。

  • 给 加 table-layout: fixed，强制按第一行（即 ）定义列宽
    所有
    标签统一声明宽度比重复写 width 更稳定

    或文本区域怎么“固定表头”

    文本域本身不支持表头概念，所谓“固定表头”实际是模拟：把标题行抽离成独立 DOM，与 同级并列，再靠 CSS 控制滚动关系。

    

    HTML Text Extract

    从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

    下载
    • 不能对 直接套 position: sticky —— 它不是表格结构，也不生成
    或 JS 读取首行字符宽度做等比缩放
    真正麻烦的不是粘性定位本身，而是列宽对齐、滚动容器高度、z-index 层级、背景色这四点——漏掉任意一，用户一眼就能察觉“漂移”或“透底”

    和对应	必须显式设 width 或 min-width（如 width: 120px 或 width: 20%） 不要依赖内容撑开宽度——table-layout: auto 下 sticky 定位基准会漂移 列数多且需响应式时，用
    常见做法：用 字段名 + ，外层包裹 ，仅让 滚动 若需多行标题（如带筛选栏），必须手动同步列宽：用 table-layout: fixed +

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