通过 CSS 的 position: sticky 使表头固定、主体独立滚动，配合合理的 table 布局与 display 设置，即可在 React Table Library 等场景下实现表头冻结、tbody 可滚动的交互效果。

通过 css 的 `position: sticky` 使表头固定、主体独立滚动，配合合理的 table 布局与 display 设置，即可在 react table library 等场景下实现表头冻结、tbody 可滚动的交互效果。

要实现仅滚动表格主体（<tbody>）而保持表头（<thead>）始终可见，核心思路是：将 <thead> 设为粘性定位（position: sticky），同时确保 <tbody> 具备独立的滚动容器能力。直接对 <tbody> 设置 display: block 会破坏表格默认的列对齐逻辑，导致“单列塌陷”——这正是你遇到的问题。

✅ 正确做法如下：

1. 保留 <table> 的原生 display: table 结构，避免对 <thead> 或 <tbody> 强制设为 block；
2. 为 <thead> 添加 position: sticky; top: 0;，使其在滚动时吸附于顶部；
3. 将 <tbody> 包裹进一个带 max-height 和 overflow-y: auto 的容器中（如 <div>），或直接在 <tbody> 上设置 display: block + overflow-y: auto ——但需同步修复列宽对齐。

推荐采用更稳定、兼容性更好的方案：用外层容器控制滚动，并利用 sticky 固定表头：

// React 示例（适配 react-table-library）
<div style={{ maxHeight: '300px', overflowY: 'auto', border: '1px solid #e0e0e0' }}>
  <table style={{ width: '100%', borderCollapse: 'collapse' }}>
    <thead>
      <tr>
        <th style={{ position: 'sticky', top: 0, background: '#fff', zIndex: 10 }}>
          Name
        </th>
        <th style={{ position: 'sticky', top: 0, background: '#fff', zIndex: 10 }}>
          Age
        </th>
        <th style={{ position: 'sticky', top: 0, background: '#fff', zIndex: 10 }}>
          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;
  }

? 总结：放弃对 <tbody> 强行设 display: block 导致的布局断裂，转而依靠 sticky + 容器滚动，既保持表格语义化与列宽自动对齐，又实现专业级的冻结表头体验。