无法设置 React 的最大高度 bootstrap table

Question

我想设置我的 bootstrap table.

的最大高度

我尝试了以下逻辑，但我的 table 没有任何效果。

//1st try
componentDidMount() {
 let height = 100;
 this.setState({tableHeight: height + "px"});
}

<BootstrapTable style={{color: this.state.colorCr }}
  data={this.state.crArray}
  headers={this.props.state.options.headers}
  columns={crCol}
  maxHeight={this.state.tableHeight}
>
</BootstrapTable>

//2nd try

<BootstrapTable style={{color: this.state.colorCr }}
   data={this.state.crArray}
   headers={this.props.state.options.headers}
   columns={crCol}
   height={100}
>
</BootstrapTable>

//3rd try

<BootstrapTable style={{color: this.state.colorCr }}
   data={this.state.crArray}
   headers={this.props.state.options.headers}
   columns={crCol}
   bodyStyle={ { maxHeight: '100px' } }
>
</BootstrapTable>

任何人都可以告诉我我做错了什么，或者任何其他设置 Bootstrap table 的最大高度的方法。非常感谢任何帮助。

Answer 1

React Bootstrap Table 本身向 <table> 标签添加了一个包装器 div。所以不需要添加额外的<div>。请首先阅读下面的 link，他们在其中提供了一个示例来添加 classes 和 id 以自定义 table。

Customized id and class table

在你的情况下，你必须

首先在 css 文件中为 wrapperClasses 道具添加一个 css 规则，将 max-height 指定为所需值，将 overflow 指定为 auto.这将适用于包装器 div 并将帮助您拥有滚动条。
要使页眉具有粘性并且只有正文可以滚动，请在 <th> 的 css 规则之后再添加一个。 class 范围限制由您决定。我只想为我项目中特定 div 下的 table 使用它。否则，只需输入 table thead th.

.<class-name-of-wrapper-div> table thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: #FFFFFF;
}

希望它能解决您的问题。

无法设置 React 的最大高度 bootstrap table

Not able to set the max height of React bootstrap table

reactjs

react-bootstrap-table