Невозможно установить максимальную высоту таблицы React bootstrap

Question

Я хочу установить maxHeight моей bootstrap таблицы.

Я пробовал приведенную ниже логику, но ничего не работает для моей таблицы.

//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 таблицы. Любая помощь будет очень оценена.

Answer 1

Реагирует Bootstrap Сама таблица добавляет тег-обертку к тегу <table>. Поэтому нет необходимости добавлять дополнительные <div>. Пожалуйста, go сначала по приведенной ниже ссылке, в которой они предоставили пример добавления классов и идентификаторов для настройки таблицы.

Настроенный идентификатор и таблица классов

В В вашем случае вы должны

1. Сначала добавить css правило для wrapperClasses проп в вашем файле css, указав max-height до желаемого значения и overflow до auto , Это будет применимо к оболочке div и поможет вам иметь полосу прокрутки.
2. Чтобы сделать заголовок липким и прокручивать только тело, добавьте еще одно следующее css правило для <th>. Вам решать иметь ограничения области действия класса. Я хотел, чтобы это было только для таблицы с указанным c div в моем проекте. В противном случае просто введите table thead th.

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

Надеюсь, это решит вашу проблему.