Как отобразить 20+ столбцов с помощью react-bootstrap-table-next

Я пытаюсь использовать response-bootstrap-table-next для рендеринга таблицы с более чем 20 столбцами. Сейчас мои данные отображаются, но при таком большом количестве столбцов текст сжимается. Есть ли для такой таблицы возможность горизонтальной прокрутки или разбивки на страницы заголовков столбцов?

Спасибо!


reactjs react-bootstrap-table
person Adam Bradbury    schedule 19.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если у вас слишком широкий стол, возможно, вы могли бы попробовать следующее:

Добавьте элемент контейнера с настраиваемым классом css, который устанавливает: overflow-x:auto вокруг таблицы. При необходимости при этом должна отображаться горизонтальная полоса прокрутки. Например:

HTML:

<div class="table-horiz-scroll" >
  <table>
    <tr><!-- row headers--></tr>
    <tr><!-- row 1 data--></tr>
    <tr><!-- row 2 data--></tr>
    <tr><!-- ... --></tr>
    <tr><!-- row n data--></tr>
  </table>
</div>

CSS:

 .table-horiz-scroll {
    overflow-x:auto;
 }

Надеюсь, это поможет!

person Nathan    schedule 19.02.2019
comment
Спасибо за ответ, но если я хочу добавить горизонтальную полосу прокрутки только в последние два столбца. Последние два столбца следует поместить в прокручиваемый контейнер. Как мы можем это реализовать? stackoverflow.com/questions/64114303/ - person Kunal Tyagi; 29.09.2020