Bootstrap如何让表格Table的标题（Thead）在滚动时固定不动-Bootstrap教程-PHP中文网

position: sticky 是最轻量、最推荐的方案，但需满足三个硬性条件：上设 position: sticky 和 top: 0，父容器有明确 max-height，且不能被 transform 或 will-change 破坏层叠上下文；否则失效。

直接说结论：position: sticky 是最轻量、最推荐的方案，但必须满足三个硬性条件——<th> 上设 <code>position: sticky 和 top: 0，父容器有明确 max-height，且不能被 transform 或 will-change 破坏层叠上下文。否则就失效，不是你写错了，是浏览器根本不触发 sticky。

为什么 `thead` 加了 `position: sticky` 还是滚走了

根本原因不是 CSS 写得不对，而是 thead 的父级 <table> 是 <code>display: table，而所有主流浏览器（Chrome/Firefox/Safari）都不支持在 table 及其内置子元素（thead、tbody、tr）上正确应用 sticky。常见现象包括：

thead 完全不动，像被钉死在原处，不随滚动“吸附”顶部
滚动时 thead 突然消失或错位到左上角
整个表格结构塌陷，列宽崩乱

这不是 Bootstrap 的锅，是 HTML 表格语义和 CSS 渲染引擎的限制。绕过它的唯一办法：别让 thead 和 tbody 待在同一个 <table> 里滚动。<h3> <code>position: sticky 能用的前提条件

如果你确认只支持现代浏览器（Chrome 56+ / Firefox 59+ / Safari 15.4+），且不需要 IE 或旧 Edge，可以走轻量路线。关键不是给 thead 加样式，而是给每个 <th> 单独加：<ul><li> <code>position: sticky 必须写在 <th> 上，不是 <code><tr> 或 <code><thead> <li> <code>top: 0 不可省略；如果表格有 border-collapse: collapse，可能需要 top: -1px 微调对齐

包裹 <table> 的外层容器必须设 <code>max-height 和 overflow-y: auto（仅 overflow-x: auto 不够）

避免在外层加 transform、filter 或 will-change，它们会创建新的层叠上下文，导致 sticky 失效

示例片段：

<div style="max-height: 400px; overflow-y: auto;">
  <table class="table table-striped">
<thead><tr>
<th style="position: sticky; top: 0; background: #fff; z-index: 10;">姓名</th>
        <th style="position: sticky; top: 0; background: #fff; z-index: 10;">邮箱</th>
      </tr></thead>
<tbody>
<tr>
<td>张三</td>
<td>zhang@example.com</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
</div>

兼容性差时必须用 display: block 拆分结构

一旦要支持 IE、旧 Edge，或发现 sticky 在某些安卓 WebView 里抽风，就得放弃语义化表格流，改用结构拆分法。核心是把 tbody 剥离出来放进独立滚动容器，并重置 display：

给 <thead> 设 <code>display: block，同时 <tr> 和 <code><th> 都要设成 <code>display: table-row / table-cell
<tbody> 包在 <code><div style="max-height: 400px; overflow-y: auto;"> 里，且 <code><tbody> 自身设 <code>display: block
列宽必须靠 <colgroup></colgroup> 或显式 width 控制，否则表头和内容列会错位
Bootstrap 的 .table-responsive 只处理横向滚动，对这个方案没用，别套它

这种写法稳定，但代价是 HTML 结构变复杂，且响应式断点需手动适配列宽。