如何让React Bootstrap表格的垂直与水平滚动条始终可见？

我使用React Bootstrap的响应式表格，支持动态列显示：列数足够多时需要横向滚动，行数较多时需要纵向滚动。但遇到一个问题——横向滚动到左侧时，垂直滚动条会消失，希望实现类似Excel的滚动条始终可见的效果。

问题根源 #

之前的CSS将tbody设为display: block并单独设置纵向滚动，而横向滚动作用于整个表格，导致tbody的垂直滚动条会随表格横向滚动被移出视口，从而消失。

解决方案 #

核心思路是把表格包裹在一个固定高度的容器中，让容器负责纵向滚动（滚动条固定在容器右侧），表格自身负责横向滚动，同时保证表头与内容列的宽度对齐。

修改后的CSS

/* 外层滚动容器 */
.table-container {
  height: 400px; /* 根据需求自定义高度 */
  overflow-y: auto;
}

/* 表格样式 */
.my-table {
  width: fit-content; /* 让表格宽度自适应列数 */
  table-layout: fixed; /* 固定列宽，避免列宽错乱 */
}

/* 统一列宽 */
.my-table th, .my-table td {
  width: 120px; /* 和之前设定的列宽保持一致 */
  min-width: 120px; /* 防止列被压缩 */
}

修改后的React组件

const MyComponent = (props) => {
  const renderColumnHeaders = () => {
    return props.columns.map((column, idx) => (
      <th key={idx}>{column}</th>
    ));
  };

  const renderRows = () => {
    return props.rows.map((row, idx) => (
      <tr key={idx}>
        {row.map((cell, cellIdx) => (
          <td key={cellIdx}>{cell.value}</td>
        ))}
      </tr>
    ));
  };

  return (
    <div className="table-container">
      <Table 
        className="my-table"
        size="sm"
        responsive={false} {/* 关闭自带响应式，避免样式冲突 */}
      >
        <thead>{renderColumnHeaders()}</thead>
        <tbody>{renderRows()}</tbody>
      </Table>
    </div>
  );
};

额外优化：固定表头（可选） #

如果需要像Excel一样固定表头，不随纵向滚动消失，可以添加以下CSS：

.table-container {
  height: 400px;
  overflow-y: auto;
  position: relative;
}

.my-table thead {
  position: sticky;
  top: 0;
  background-color: #fff; /* 用背景色覆盖下方内容 */
  z-index: 1;
}

关键修改点说明 #

1. 外层容器承担纵向滚动，滚动条固定在容器右侧，不会随表格横向滚动移动
2. 表格设为width: fit-content，自动根据列数撑开宽度，实现横向滚动
3. 统一表头和单元格的宽度，保证列对齐
4. 关闭React Bootstrap Table的responsive属性，避免自带的响应式样式干扰
5. 给列表元素添加key，符合React渲染规范

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