通过 CSS 的 position: sticky 固定表头并独立控制 tbody 滚动，可避免传统 display: block 破坏表格布局导致列错位的问题，同时保持语义化结构与响应式兼容性。
通过 css 的 `position: sticky` 固定表头并独立控制 tbody 滚动，可避免传统 `display: block` 破坏表格布局导致列错位的问题，同时保持语义化结构与响应式兼容性。
在构建长数据表格时，常需限制可视区域高度并仅让表格主体（<tbody>）可滚动，而表头（<thead>）保持固定——这不仅能提升用户体验，还能避免横向错位、列宽塌缩等常见布局问题。直接对 <tbody> 设置 display: block 虽看似可行，但会破坏 <table> 的原生渲染流，导致列宽无法对齐、colspan/rowspan 失效，且与 react-table-library 等基于标准 DOM 表格语义的库不兼容。
✅ 正确解法：利用 position: sticky 固定表头，配合容器高度约束实现纯 CSS 滚动分离：
/* 容器需设定明确高度，并启用滚动 */
.table-container {
max-height: 300px;
overflow-y: auto;
border: 1px solid #e0e0e0;
}
/* 关键：使表头行 sticky，脱离文档流但保留表格上下文 */
.table-container thead th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 10;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
/* 可选：增强列对齐稳定性 */
.table-container table {
table-layout: fixed; /* 防止内容撑宽列 */
width: 100%;
}
.table-container td,
.table-container th {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid #f0f0f0;
}HTML 结构（适配 react-table-library）：
<div className="table-container">
<Table data={data} layout={{ default: Layout.Default }}>
{(tableList) => (
<div>
<Header>
<HeaderRow>
{tableList.map((item) => (
<HeaderCell key={item.id} item={item}>
{item.label}
</HeaderCell>
))}
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
<Cell>{item.name}</Cell>
<Cell>{item.status}</Cell>
<Cell>{item.updatedAt}</Cell>
</Row>
))}
</Body>
</div>
)}
</Table>
</div>⚠️ 注意事项：
- sticky 元素必须有非 auto 的 top（或 bottom）值，且其最近的具有滚动行为的祖先容器需设置 overflow-y: auto/scroll（即 .table-container）；
- 若使用 react-table-library，确保其渲染的 <thead> 和 <tbody> 保留在同一个 <table> 内（默认行为满足），不可被额外 wrapper 元素隔断；
- 在 Safari 中，需为 sticky 元素添加 -webkit-backface-visibility: hidden 以规避渲染闪烁；
- 列宽一致性建议配合 table-layout: fixed + 显式 width（如 th:nth-child(1) { width: 20% }）控制。
该方案无需修改 JavaScript 逻辑、不破坏表格语义、兼容所有现代浏览器，是目前最健壮、可维护性最高的“固定表头 + 可滚动体”实现方式。
