bootstrap默认表格不支持thead固定、tbody滚动，需用position: sticky（现代浏览器）或floatthead（ie/旧版chrome）实现；关键要设table-layout: fixed、统一th/td样式、容器硬件加速防卡顿。

Bootstrap 默认表格不支持 thead 固定、tbody 滚动，必须手动干预 CSS，且不能依赖 .table-responsive 原生行为——它只做外层容器 overflow，不分离表头与表体渲染流。

用 position: sticky 最简实现（现代浏览器）

这是目前最轻量、无需 JS、兼容 Bootstrap 4/5 的方案，但要求 <thead> 内的 <code><th> 设置 <code>position: sticky 和 top 值。

• <table> 必须设 <code>display: block 或包裹在固定高度容器中，否则 sticky 无参照
• <tbody> 需设 <code>display: block 且带 max-height 和 overflow-y: auto
• <thead> 保持 <code>display: table-header-group（默认），但内部 <th> 要加 <code>position: sticky; top: 0; background: white; z-index: 1
• 注意边框、padding 对齐：<th> 和 <code><td> 的 padding、text-align、white-space 需一致，否则列宽错位 <pre class="brush:php;toolbar:false;">&lt;div style=&quot;max-height: 300px; overflow: hidden&quot;&gt; &lt;table class=&quot;table table-bordered&quot;&gt; &lt;thead&gt;&lt;tr&gt; &lt;th style=&quot;position: sticky; top: 0; background: #fff; z-index: 1&quot;&gt;Name&lt;/th&gt; &lt;th style=&quot;position: sticky; top: 0; background: #fff; z-index: 1&quot;&gt;Email&lt;/th&gt; &lt;/tr&gt;&lt;/thead&gt; &lt;tbody style=&quot;display: block; max-height: 250px; overflow-y: auto&quot;&gt; &lt;tr&gt; &lt;td&gt;Alice&lt;/td&gt; &lt;td&gt;a@b.com&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Bob&lt;/td&gt; &lt;td&gt;b@c.com&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt;</pre> <h3>IE 或低版本 Chrome 必须用 JS 模拟（如 <code>floatThead）

  position: sticky 在 IE 完全不支持，旧版 Android WebView 也有兼容问题。此时需引入第三方库或手写监听逻辑。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • floatThead 是专为表格设计的轻量 JS 库，自动克隆 <thead> 并绝对定位，同时同步列宽 <li>初始化前确保 <code><table> 已渲染完成，且父容器有明确宽度（避免列宽计算错误） <li>不要对已用 <code>floatThead 的表格再套 .table-responsive，会干扰滚动容器层级
  • 动态增删行后需调用 $('table').floatThead('reflow') 重算列宽

  用 table-layout: fixed 防止列宽抖动

  当 <tbody> 设为 <code>display: block 后，浏览器失去表格自动列宽计算能力，容易导致列宽随内容伸缩、表头表体错位。

  • 给 <table> 加 <code>table-layout: fixed，强制按第一行（即 <thead>）定义列宽 <li>为每列 <code><th> 显式设置 <code>width（如 width: 200px 或 width: 30%），否则 fixed 无效
  • 若用 Bootstrap 的 .col-*- 类控制列宽，需额外加 min-width 防止压缩过小

  移动端触摸滚动卡顿怎么办

  在 iOS Safari 或部分安卓 WebView 中，overflow-y: auto 容器内表格滚动可能卡顿或无法滑动，本质是渲染层未启用硬件加速。

  • 给滚动容器（即包裹 <table> 的 <code><div>）加 <code>style="-webkit-overflow-scrolling: touch"
  • 避免在 <tbody> 上设太多 box-shadow / filter / transform，这些会触发重绘阻塞滚动 <li>如果行数极多（>1000），建议改用虚拟滚动（如 <code>react-window 或手写 IntersectionObserver），而不是硬撑 DOM

  真正麻烦的是列宽同步和响应式断点——sticky 在 sm 下失效、floatThead 在 resize 时漏重算、table-layout: fixed 和 flex 布局混用……这些细节不调试到真机根本看不出问题。