Адаптивная обработка таблиц в Twitter Bootstrap

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

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

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

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;
}

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

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

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

• http://css-tricks.com/responsive-data-tables/

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

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

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

• http://twitter.github.io/bootstrap/scaffolding.html#responsive

Если вы используете 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 для больших таблиц (много столбцов).

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