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

我想在使用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;
}

render（）{
返回(
{this.renderActionItems（）}
{this.renderHeaders（）}
{this.renderRows（）}
);
}
}
.表格响应{
最大高度：550px；
边框：1px实心变量（--colorInputBorder）；
颜色：var（--colorDarkPrimary）；
边界半径：5px；
}
.td表，
.表1{
空白：nowrap；
填充：8px 20px！重要；
}

这就是我所做的，使表格垂直和水平滚动，它的工作很好，但标题是不固定的

注意：正如我使用react引导一样，名为

responsive

的类在

之外添加了额外的

，类名为

表responsive

---

我不想通过手动设置宽度来实现这一功能

试试这个：如果您使用的是预构建的react表组件，那么它们应该有固定标题表的选项。否则，您可以只使用常规的表头修复程序，它可以在不考虑bootstrap或ReactJS inclusionsYes@VarunNair的情况下工作，我已经检查过了，但React bootstrap不提供这种功能。它已经使用引导3作为基础。您不必更改表的“display”属性。尝试使用标题的“位置”属性。浏览那些帖子。你会在那里找到解决办法的。酷！谢谢@VarunNair。我会尽力让你知道它是否有效。。