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

Question

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

我试图通过使用使其工作，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

我不想通过手动设置宽度来使它工作

标签： htmlcssreactjsreact-bootstrap