通过 CSS 的 position: sticky 使表头固定、主体独立滚动，配合合理的 table 布局与 display 设置，即可在 React Table Library 等场景下实现表头冻结、tbody 可滚动的交互效果。
通过 css 的 `position: sticky` 使表头固定、主体独立滚动，配合合理的 table 布局与 display 设置，即可在 react table library 等场景下实现表头冻结、tbody 可滚动的交互效果。
要实现仅滚动表格主体（
）而保持表头（）始终可见，核心思路是：将 设为粘性定位（position: sticky），同时确保 具备独立的滚动容器能力。直接对 设置 display: block 会破坏表格默认的列对齐逻辑，导致“单列塌陷”——这正是你遇到的问题。✅ 正确做法如下：
- 保留
的原生 display: table 结构，避免对 或 强制设为 block；
- 为 添加 position: sticky; top: 0;，使其在滚动时吸附于顶部；
- 将 包裹进一个带 max-height 和 overflow-y: auto 的容器中（如
），或直接在 上设置 display: block + overflow-y: auto ——但需同步修复列宽对齐。推荐采用更稳定、兼容性更好的方案：用外层容器控制滚动，并利用 sticky 固定表头：
// React 示例（适配 react-table-library） <div style="{{" maxheight: overflowy: border: solid> <table style="{{" width: bordercollapse:> <thead><tr> <th style="{{" position: top: background: zindex:> Name </th> <th style="{{" position: top: background: zindex:> Age </th> <th style="{{" position: top: background: zindex:> Role </th> </tr></thead> <tbody> {data.map((item) => ( <tr key="{item.id}"> <td>{item.name}</td> <td>{item.age}</td> <td>{item.role}</td> </tr> ))} </tbody> </table> </div>? 关键注意事项：
- position: sticky 必须配合 top（或 bottom）生效，且父容器不能有 overflow: hidden/clip；
- 为防止表头被内容遮挡，建议添加 z-index: 10 和纯色背景（如 background: #fff）；
- 若使用 react-table-library，可通过其 Header 和 Body 组件的 className 或 style 属性注入上述样式，或在全局 CSS 中定义：
.rt-table thead th { position: sticky; top: 0; background: white; z-index: 10; } .rt-table tbody { display: block; max-height: 300px; overflow-y: auto; } .rt-table thead, .rt-table tbody tr { display: table; width: 100%; table-layout: fixed; }
? 总结：放弃对
强行设 display: block 导致的布局断裂，转而依靠 sticky + 容器滚动，既保持表格语义化与列宽自动对齐，又实现专业级的冻结表头体验。 - 为 添加 position: sticky; top: 0;，使其在滚动时吸附于顶部；
