通过 CSS 的 position: sticky 固定表头并独立控制 tbody 滚动，可避免传统 display: block 破坏表格布局导致列错位的问题，同时保持语义化结构与响应式兼容性。

通过 css 的 `position: sticky` 固定表头并独立控制 tbody 滚动，可避免传统 `display: block` 破坏表格布局导致列错位的问题，同时保持语义化结构与响应式兼容性。

在构建长数据表格时，常需限制可视区域高度并仅让表格主体（

）可滚动，而表头（）保持固定——这不仅能提升用户体验，还能避免横向错位、列宽塌缩等常见布局问题。直接对 设置 display: block 虽看似可行，但会破坏 的原生渲染流，导致列宽无法对齐、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）：

Skill

一款AI工具，主要用于后台本地运行 Codex，即时回执并保存日志与补丁产物，可选 Telegram 通知，支持显式工作目录，适合需要提升相关任务效率的用户。

下载

<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>
          {tableList.map((item) => (
            <row key="{item.id}" item="{item}"><cell>{item.name}</cell><cell>{item.status}</cell><cell>{item.updatedAt}</cell></row>
          ))}
        
      </div>
    )}
  </table>
</div>

⚠️ 注意事项：

• sticky 元素必须有非 auto 的 top（或 bottom）值，且其最近的具有滚动行为的祖先容器需设置 overflow-y: auto/scroll（即 .table-container）；
• 若使用 react-table-library，确保其渲染的

和 保留在同一个 内（默认行为满足），不可被额外 wrapper 元素隔断；

在 Safari 中，需为 sticky 元素添加 -webkit-backface-visibility: hidden 以规避渲染闪烁；

列宽一致性建议配合 table-layout: fixed + 显式 width（如 th:nth-child(1) { width: 20% }）控制。

该方案无需修改 JavaScript 逻辑、不破坏表格语义、兼容所有现代浏览器，是目前最健壮、可维护性最高的“固定表头 + 可滚动体”实现方式。