Bootstrap 3 table - таблица-отзывчивость не работает

Я использую Bootstrap 3 для проекта веб-сайта. Я пытаюсь создать страницу с адаптивной таблицей, чтобы у меня была полоса прокрутки, когда таблица слишком большая. Я сделал тестовый пример так:

<div class="row">
  <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

Теперь проблема в том, что он не добавляет полосу прокрутки, он просто расширяет веб-сайт до ширины таблицы.

Смотрите скриншот здесь:

Я видел, как это работает на нескольких других сайтах, поэтому что-то я делаю... неправильно.

Ответ 1

Замените эту таблицу с учетом этого

<div class='table-responsive'> -> <div style="overflow-x:auto;">

Ответ 2

Обязательно установите отображение таблицы

.table {
   display: block !important;
}

Ответ 3

bootstrap table-responsive отлично работает в среде песочницы, но он не работает в режиме реального времени. Причиной ошибки является то, что bootstrap дает стиль с учетом таблицы шириной: 100% и overflow-y: hidden. Эти два стиля не играют вместе. Скрытие переполнения лучше всего работает при фиксированной или максимальной ширине. Я дал максимальную ширину стола: 270 пикселей; для мобильных устройств, и что исправлена ошибка.

Ответ 4

Вы код в порядке. Я просто создал скрипку здесь.

Работает там!

Я буквально скопировал и вставил ваш код. Вы уверены, что ваши ссылки на файл Javascript Bootstrap и файл CSS работают?

<div class="row">
 <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
   <div class="table-responsive">
    <table class="table">
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->
  </div><!-- end row -->

Ответ 5

У меня возникла эта проблема и я обнаружил, что она работала либо для того, чтобы предоставить таблице ширину набора в px, либо для установки таблицы для отображения: block.

Ответ 6

Я сделал это.

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">


            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">


                       //wrapper that will give opportunity to use: overflow-x: auto; 
                       <table style="table-layout: fixed; width: 100%;">
                           <tr>
                               <td>


                                  //SCROLL
                                  <div style="width: 100%; overflow-x: auto;">

                                      //table, that shoud have "table-responsive" bootstrap class effect
                                      <table class="table table-hover">

                                          //...table content...

                                      </table>

                                  </div>


                               <td>
                           </tr>

                       </table>                           


                    </div>
                </div>

        </div>
    </div>
</div>

Вы получите на xs-screen (пример из моего приложения):

Ответ 7

Вы можете использовать FooTable. Это плагин jQuery, который позволяет изменять размер и распространять данные в ваших таблицах, чтобы наилучшим образом разместить вашу текущую точку останова.

Ответ 8

Для меня это значение "min-width" в элементе body нарушало чувствительность этого класса.

Ответ 9

Попробуйте это удалить <div class="table-responsive">...</div>
и переместить класс table-отзыв в
<div class="col-12 col-sm-12 col-lg-12">

пример

<div class="col-12 col-sm-12 col-lg-12 table-responsive">

эта 100% работает, но если не работает, переместите класс table-responsive на предыдущий слой Div, В этом случае необходимо удалить <div class="col-12 col-sm-12 col-lg-12">.

Ответ 10

В своем коде я добавил класс CSS:

.modal-body{
  max-width:95vw;
}

Макет работал на sm