通过 CSS 的 position: sticky 使表头固定、主体区域独立滚动，可完美解决 React Table Library 中表体错列或单列显示问题，无需破坏表格语义结构。
通过 css 的 `position: sticky` 使表头固定、主体区域独立滚动，可完美解决 react table library 中表体错列或单列显示问题，无需破坏表格语义结构。
在使用 react-table-library（或其他基于原生 <table> 的表格库）时，若希望仅滚动表格主体（<tbody>），同时保持表头（<thead>）始终可见，直接对 <tbody> 设置 display: block 是常见但错误的做法——它会破坏表格的默认布局上下文，导致单元格宽度塌陷、列对不齐，最终呈现为“单列堆叠”效果。
✅ 正确解法是：保持 <table> 的标准 display 行为（display: table），仅对 <thead> 应用 position: sticky，并确保其父容器具备滚动上下文。
✅ 推荐实现步骤：
-
为表格容器设置固定高度与垂直滚动
.scrollable-table-container { max-height: 300px; overflow-y: auto; border: 1px solid #e0e0e0; } -
固定表头，赋予粘性定位与背景遮罩（防滚动穿透）
.scrollable-table-container thead th { position: sticky; top: 0; background-color: #fff; /* 必须设置，避免滚动时内容透出 */ z-index: 10; border-bottom: 2px solid #e0e0e0; } -
确保表格自身不换行、自适应列宽
.scrollable-table-container table { width: 100%; table-layout: auto; /* 或 'fixed'（需配合 th width）以提升性能 */ border-collapse: collapse; }
⚠️ 关键注意事项：
- position: sticky 依赖最近的具有滚动行为的祖先容器（即 .scrollable-table-container），因此必须将 overflow-y: auto 应用于该容器，而非 <tbody>；
- 不要给 <tbody> 设置 display: block —— 这会强制脱离表格格式化上下文，导致列宽计算失效；
- 若使用 react-table-library，推荐通过 BaseTable 的 className 或 style 属性注入上述容器类，并利用其 Header/Body 渲染钩子控制样式；
- 在 Safari 中，建议添加 -webkit-backface-visibility: hidden 到 th 以增强 sticky 兼容性。
✅ 示例（React + react-table-library）
import { BaseTable, Header, Body, Row, Cell } from '@table-library/react-table-library';
const MyTable = ({ data }) => (
<div className="scrollable-table-container">
<BaseTable data={data}>
{(tableList) => (
<>
<Header>
{(headerList) => (
<tr>
{headerList.map((item) => (
<th key={item.id} style={{ padding: '12px 8px', textAlign: 'left' }}>
{item.label}
</th>
))}
</tr>
)}
</Header>
<Body>
{(bodyList) => (
bodyList.map((item) => (
<Row key={item.id}>
<Cell>{item.name}</Cell>
<Cell>{item.status}</Cell>
<Cell>{item.updatedAt}</Cell>
</Row>
))
)}
</Body>
</>
)}
</BaseTable>
</div>
);✅ 总结：固定表头 ≠ 拆分表格结构。利用 sticky + 容器滚动，既保留 HTML 表格的语义与列对齐能力，又实现优雅的局部滚动体验——这是现代前端表格交互的标准实践。
