时间戳

首页 > 解决方案 > 无法设置 React 引导表的最大高度

reactjs - 无法设置 React 引导表的最大高度

问题描述

我想设置我的引导表的 maxHeight。

我已经尝试了以下逻辑，但对我的桌子没有任何作用。

//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桌子的最大高度。任何帮助都会非常感激。

标签： reactjsreact-bootstrap-table

解决方案

React Bootstrap Table 本身为<table>标签添加了一个包装器 div。所以不需要额外添加<div>。请先浏览下面的链接，他们在其中提供了一个示例来添加类和 id 以自定义表格。

自定义id和class表

在你的情况下，你必须

  1. 首先在您的 css 文件中为 prop 添加一个 css 规则，其中wrapperClasses提到max-heightto 所需的值和overflowto auto。这将适用于包装器 div 并将帮助您拥有一个滚动条。
  2. 要使标题具有粘性并且只有正文可以滚动，请为<th>. 有一个类范围限制取决于你。我只想将它用于我项目中特定 div 下的表格。否则，只需放置table thead th.
.<class-name-of-wrapper-div> table thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: #FFFFFF;
}

希望它能解决你的问题。

推荐阅读