Как сделать исправленный заголовок при горизонтальной и вертикальной прокрутке - PullRequest
Новая
       13

Как сделать исправленный заголовок при горизонтальной и вертикальной прокрутке

2 голосов
/ 05 апреля 2019

Я хочу установить заголовок (не для заголовка 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;
}

Это то, что я сделал, чтобы сделать таблицу с вертикальной и горизонтальной прокруткой, и она работает нормально, но заголовок не зафиксирован.

ПРИМЕЧАНИЕ. Поскольку я использовал ответную загрузку, класс с именем responsive добавляет <div> дополнительно к <Table> с именем класса table-responsive

Я НЕ ХОЧУ СДЕЛАТЬ ЭТУ РАБОТУ, УСТАНАВЛИВАЯ ШИРИНУ ВРУЧНУЮ

...