如何在水平和垂直滚动时固定标题

Question

我想从React-bootstrap设置 的标头（不适用于div标头），同时使用使其可垂直和水平滚动。

我试图通过使用display: block使其工作，但它在响应模式下弄乱了表。

render() {
    return (
      <div className="padding-top-16" id="maximise" >
        {this.renderActionItems()}
        <div className={'col-xs-12'} style={{ marginTop: '16px', marginBottom: '16px' }}>
          <Table hover responsive>
            <thead>
              {this.renderHeaders()}
            </thead>
            <tbody>
              {this.renderRows()}
            </tbody>
          </Table>
        </div>
      </div>
    );
  }
}

.table-responsive {
  max-height: 550px;
  border: 1px solid var(--colorInputBorder);
  color: var(--colorDarkPrimary);
  border-radius: 5px;
}

.table-responsive td,
.table-responsive th {
  white-space: nowrap;
  padding: 8px 20px !important;
}

这是我所做的使表格可垂直和水平滚动的方法，它工作正常，但标题未固定。

注意：由于我使用了react-bootstrap，因此名为responsive的类在<div>之外的类名为<Table>的地方添加了额外的table-responsive

我不想通过手动设置宽度来完成这项工作