基于Reactstrap响应式表格实现表头固定表体滚动的问题求助

方案1：纯CSS实现（推荐，无额外依赖） #

实现成本最低，不需要改动现有表格逻辑，仅需调整容器结构和添加对应样式即可：

• 第一步：调整JSX结构，给表格添加专属外层容器，同时关闭Reactstrap自带的responsive属性，避免和滚动逻辑冲突：

import { Table } from 'reactstrap';

// 组件内表格结构
<div className="sticky-table-container">
  <Table bordered responsive={false}>
    <thead>
      {/* 原有表头内容 */}
    </thead>
    <tbody>
      {/* 原有表体内容 */}
    </tbody>
  </Table>
</div>

• 第二步：添加对应CSS样式：

.sticky-table-container {
  height: 400px; /* 可根据业务需求自定义表格整体高度 */
  overflow: hidden;
  /* 如果需要支持横向滚动，可加上 overflow-x: auto; */
}

.sticky-table-container thead th {
  position: sticky;
  top: 0;
  background: #fff; /* 必须给表头添加背景色，避免滚动时表体内容透上来 */
  z-index: 1;
  box-shadow: 0 1px 0 #dee2e6; /* 替代默认底部边框，避免滚动时边框错位 */
}

/* 如需保证表头表体列宽严格对齐，可添加以下样式 */
.sticky-table-container table {
  table-layout: fixed;
  width: 100%;
}

.sticky-table-container td, 
.sticky-table-container th {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 不需要文字折行可加以下属性，需要折行则删除 */
  white-space: nowrap; 
}

该方案依赖的position: sticky属性兼容所有主流现代浏览器，是优先选择的实现方案。

方案2：拆分表头表体为独立表格（兼容老浏览器可选） #

如果需要兼容IE等不支持sticky属性的老版本浏览器，可以把表头、表体拆分为两个独立的Reactstrap Table组件，用统一的列宽配置保证对齐：

• JSX结构示例：

import { Table } from 'reactstrap';

// 统一列宽配置
const columns = [
  { label: 'ID', key: 'id', width: '10%' },
  { label: '名称', key: 'name', width: '35%' },
  { label: '操作', key: 'action', width: '20%' },
];

// 组件内结构
<div className="split-table-container">
  {/* 独立表头表格 */}
  <Table bordered className="header-table">
    <thead>
      <tr>
        {columns.map(col => <th key={col.key} width={col.width}>{col.label}</th>)}
      </tr>
    </thead>
  </Table>
  {/* 表体滚动容器 */}
  <div className="body-scroll-wrapper">
    <Table bordered className="body-table">
      <tbody>
        {tableData.map(row => (
          <tr key={row.id}>
            {columns.map(col => <td key={col.key} width={col.width}>{row[col.key]}</td>)}
          </tr>
        ))}
      </tbody>
    </Table>
  </div>
</div>

• 对应CSS样式：

.split-table-container {
  width: 100%;
}

.header-table {
  margin-bottom: 0;
}

.body-scroll-wrapper {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.body-table {
  border-top: none; /* 消除表头、表体边框重复问题 */
  margin-bottom: 0;
}

内容的提问来源于stack exchange，提问作者Virus