@montana_hand
Вы можете использовать CSS-свойство overflow-x: auto
чтобы сделать горизонтальную прокрутку таблицы в Bootstrap. Пример:
1 2 3 |
<table class="table table-striped table-bordered" style="overflow-x: auto;"> ... </table> |
@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.