如何实现仅滚动表格主体 tbody 而固定表头 thead

本文介绍在 React Table Library 中通过 CSS 实现表头固定、仅滚动表格主体的方案，解决 display: block 导致列宽错乱的问题，确保响应式布局与列对齐。

本文介绍在 react table library 中通过 css 实现表头固定、仅滚动表格主体的方案，解决 `display: block` 导致列宽错乱的问题，确保响应式布局与列对齐。

在使用 react-table-library 构建数据表格时，常需支持大量数据的垂直滚动。若直接对 <tbody> 应用 display: block 和 overflow: scroll，虽能启用滚动，但会破坏 HTML 表格的原生布局机制——<tbody> 被强制转为块级元素后，其内部 <tr> 和 <td> 不再受 <thead> 的列宽约束，导致列宽塌缩、错位甚至单列堆叠。

正确解法：避免修改 tbody 的 display 属性，改用 position: sticky 固定表头。只需为 <thead> 添加如下 CSS：

thead {  position: sticky;  top: 0;  background-color: white; /* 避免滚动时内容透出，建议设置背景 */  z-index: 10;}

同时，为整个 <table> 设置 overflow: hidden，并限制容器高度（而非直接作用于 tbody）：

.table-container {  max-height: 300px;  overflow: auto;  border: 1px solid #e0e0e0;}table {  width: 100%;  border-collapse: collapse;  table-layout: auto; /* 或 fixed（配合显式列宽更稳定） */}

在 React 组件中，将表格包裹在带 .table-container 类的 div 中：

<div className="table-container">  <Table data={data} layout={{ custom: true }}>    {(tableList) => (      <>        <Thead>          {tableList.map((item) => (            <Tr key={item.id}>              <Th>{item.label}</Th>            </Tr>          ))}        </Thead>        <Tbody>          {tableList.map((item) => (            <Tr key={item.id}>              <Td>{item.value}</Td>            </Tr>          ))}        </Tbody>      </>    )}  </Table></div>

⚠️ 注意事项：

• position: sticky 在现代浏览器中兼容良好（Chrome 56+、Firefox 59+、Safari 15.4+），旧版 Safari 需加 -webkit-sticky 前缀；
• 若列内容长度差异大，建议搭配 table-layout: fixed 并为 <th>/<td> 设置 width 或 min-width，以保障列宽一致性；
• 固定表头时，务必为 thead 显式设置 background-color，否则滚动时下方 tbody 内容可能穿透显示；
• 不要对 tbody 设置 display: block 或 flex 等非表格显示模式——这会彻底脱离表格渲染流，引发不可控的布局断裂。

该方案无需修改 react-table-library 的内部结构，纯 CSS 实现，轻量、可靠且语义清晰，是当前最推荐的“冻结表头 + 滚动主体”实践方式。