react实现表头固定

实现固定表头的方法

在React中实现固定表头的表格可以通过CSS和React组件结合完成。以下是两种常见方法：

使用CSS定位

将表头部分设置为position: sticky并指定top: 0，同时确保表格容器有明确的高度和overflow: auto。

<div style={{ height: '400px', overflow: 'auto' }}>
  <table>
    <thead style={{ position: 'sticky', top: 0, background: 'white' }}>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      {/* 表格内容 */}
    </tbody>
  </table>
</div>

拆分表格结构

将表头和表格体拆分为两个独立表格，通过同步滚动实现固定表头效果。

<div style={{ display: 'flex', flexDirection: 'column' }}>
  <div>
    <table>
      <thead>
        <tr>
          <th style={{ width: '200px' }}>Header 1</th>
          <th style={{ width: '200px' }}>Header 2</th>
        </tr>
      </thead>
    </table>
  </div>
  <div style={{ height: '400px', overflow: 'auto' }}>
    <table>
      <tbody>
        {/* 表格内容 */}
      </tbody>
    </table>
  </div>
</div>

注意事项

• 确保列宽一致，避免表头与内容列不对齐
• 考虑添加背景色或边框增强表头视觉稳定性
• 对于复杂表格，可使用第三方库如react-table或material-ui的表格组件

响应式处理

添加媒体查询适应不同屏幕尺寸：

@media (max-width: 768px) {
  .table-container {
    width: 100%;
    overflow-x: auto;
  }
}

以上方法可根据具体需求选择，CSS定位方案更简洁，拆分表格方案兼容性更好。