Отзывчивая обработка таблиц в Twitter Bootstrap

Когда ширина таблицы превышает ширину пролета, как эта страница: http://jsfiddle.net/rcHdC/

Вы увидите, что содержимое таблицы находится за пределами span.

Каким будет лучший способ удовлетворить этот случай?

ОТВЕТЫ

Ответ 1

В Bootstrap 3 теперь есть ответные таблицы из коробки. Ура!:)

Вы можете проверить это здесь: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Добавьте <div class="table-responsive">, окружающий ваш стол, и вам должно быть хорошо:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Чтобы он работал на всех макетах, вы можете сделать это:

.table-responsive
{
    overflow-x: auto;
}

Ответ 2

Один из доступных вариантов - fooTable. Отлично работает на адаптивном веб-сайте и позволяет устанавливать несколько точек останова... fooTable Link

Ответ 3

Есть много разных вещей, которые вы можете делать при работе с гибкими таблицами.

Мне лично нравится этот подход Криса Койера:

Здесь вы можете найти много других альтернатив:

Если вы можете использовать Bootstrap и быстро получить что-то, вы можете просто использовать имена классов ".hidden-phone" и ".hidden-tablet", чтобы скрыть некоторые строки, но этот подход может быть лучшим во многих случаях. Дополнительная информация (см. "Вспомогательные классы-утилиты" ):

Ответ 4

Если вы используете Bootstrap 3 и Less, вы можете применить реагирующие таблицы ко всем разрешениям, обновив файл:

tables.less

или перезапись этой части:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

С

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

Обратите внимание, как я изменил значение первой строки @screen-XX.

Я знаю, что сделать все таблицы отзывчивыми может показаться не очень хорошим, но мне было чрезвычайно полезно, чтобы это позволило LG работать с большими таблицами (много столбцов).

Надеюсь, что это поможет кому-то.