唯一可行路径是直接为每个设置position: sticky；因和的display类型不支持粘性定位，仅可响应sticky，且需满足容器max-height+overflow、显式top/z-index/背景色、table-layout: fixed及列宽一致等硬性条件。

直接给每个 <th> 加 <code>position: sticky，而不是作用于 <thead> 或 <code><tr> —— 这是唯一能不破坏语义、不改结构、不引入 JS 的可行路径。 <h3>为什么 <code><thead> 上加 <code>sticky 没反应

浏览器根本不把 <thead> 当作可粘性定位的元素：它的 <code>display 是 table-header-group，内部定位逻辑被重置为 static，任何 top 或 z-index 都会被忽略。你看到的“没效果”，不是写错了，是根本没生效。

• 检查 DevTools 元素面板，<thead> 的 computed <code>position 一定是 static，哪怕你写了 sticky
• <tr> 同样无效，它默认是 <code>table-row，也不支持粘性定位
• 真正能响应 sticky 的，只有 <th> 和 <code><td> 这类单元格级元素 <h3>必须满足的四个硬性条件</h3> <p>哪怕 <code><th> 写了 <code>sticky，缺一不可，否则表头会消失、错位、或只粘半截：
  • 包裹表格的容器（比如 <div class="table-container">）必须设 <code>max-height + overflow-y: auto —— 没滚动上下文，sticky 不触发
  • 每个 <th> 必须显式写 <code>position: sticky; top: 0;，不能靠继承或父级设置
  • <th> 必须有 <code>z-index: 1070 或更高（Bootstrap 环境下至少要盖过 dropdown-menu 的 1050 和 modal 的 1060）
  • <th> 必须设不透明背景，如 <code>background-color: white，否则滚动时下面的 <td> 会透上来 <h3>列宽错位？那是 <code>table-layout 没管好

    表头和内容列宽不一致，不是 sticky 的锅，是表格自动计算列宽导致的渲染分裂。浏览器会分别按 <thead> 和 <code><tbody> 的内容算一遍宽度，结果自然对不上。 <ul> <li>必须加 <code>table-layout: fixed（Tailwind 中是 table-fixed），强制整表按第一行定义列宽

  • 给每个 <th> 和对应位置的 <code><td> 设相同宽度，例如 <code>w-32 或 min-w-[120px]
  • 避免 white-space: normal 导致长文本换行撑开列宽；用 whitespace-nowrap 或 truncate
  • 别依赖 <colgroup></colgroup> —— 它在响应式场景下不可控，且无法通过 Tailwind 类直接干预

  iOS Safari 下表头闪动或突然失效

  iOS 15.4 及更早版本对 sticky 触发极其敏感，稍有偏差就回退成 static，尤其在地址栏缩放抖动时。

  
  CSS婚礼策划服务机构宣传网站模板
  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
  下载
  • 容器高度别用 h-[400px]，改用 min-h-[400px]，避免 Safari 高度计算失败
  • z-index 必须显式声明数字，z-10 在某些层叠上下文中不够，建议起步用 z-50 或 z-1070
  • 确保容器没有 transform、filter、perspective —— 这些会创建新层叠上下文，切断 sticky 定位链
  • 整个页面别在 body 或根 div 上设 overflow-x: hidden，它可能意外阻断粘性参考链

  最易被忽略的一点：所有这些规则都只在「单元格层级」起效。你没法绕过 <th> 直接操作语义容器，也没法靠一层 CSS 类全局启用——每个 <code><th> 都得亲手加 <code>sticky、top、z-index 和背景色。这不是冗余，是规范要求。