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

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

在使用 react-table-library 构建数据表格时，常需支持大量数据的垂直滚动。若直接对

应用 display: block 和 overflow: scroll，虽能启用滚动，但会破坏 HTML 表格的原生布局机制—— 被强制转为块级元素后，其内部 和 不再受 的列宽约束，导致列宽塌缩、错位甚至单列堆叠。

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

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

同时，为整个

设置 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 中：

H2O EvalGPT

H2O EvalGPT是一款AI模型评测工具，H2O.ai 推出的基于 Elo 评级方法的大语言模型评估系统。

下载

<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 并为

/	设置 width 或 min-width，以保障列宽一致性； 固定表头时，务必为 thead 显式设置 background-color，否则滚动时下方 tbody 内容可能穿透显示； 不要对 tbody 设置 display: block 或 flex 等非表格显示模式——这会彻底脱离表格渲染流，引发不可控的布局断裂。 该方案无需修改 react-table-library 的内部结构，纯 CSS 实现，轻量、可靠且语义清晰，是当前最推荐的“冻结表头 + 滚动主体”实践方式。