Как сделать прокрутку таблицы в bootstrap?

Пользователь

от montana_hand , в категории: HTML/CSS , 2 года назад

Как сделать прокрутку таблицы в bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от eudora , 2 года назад

@montana_hand 

Вы можете использовать CSS-свойство overflow-x: auto чтобы сделать горизонтальную прокрутку таблицы в Bootstrap. Пример:

1
2
3
<table class="table table-striped table-bordered" style="overflow-x: auto;">
  ...
</table>


Пользователь

от deshaun_cormier , год назад

@montana_hand 

Пример, представленный ниже, позволяет создать прокрутку таблицы внутри контейнера с использованием overflow-x: auto и задания фиксированной ширины внешнего контейнера:

1
2
3
4
5
6
7
<div class="container">
  <div class="table-responsive">
    <table class="table table-striped table-bordered">
      ...
    </table>
  </div>
</div>


В данном примере стили table-responsive и table взяты из Bootstrap. Класс table-responsive позволяет отображать таблицу в блоке с прокруткой на мобильных устройствах, а класс table создает стили для таблицы (стили в данном случае можно заменить на свои собственные).


Кроме того, вы можете использовать внешний контейнер для таблицы и задать ему фиксированную ширину, что позволит создать горизонтальную прокрутку:

1
2
3
4
5
6
7
<div class="container" style="width: 500px;">
  <div class="table-responsive">
    <table class="table table-striped table-bordered">
      ...
    </table>
  </div>
</div>


Оба примера приведены для Bootstrap 4, но должны работать также и с Bootstrap 3.