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

84

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

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

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

html twitter-bootstrap css Райан
источник
Что бы вы хотели сделать?
cimmanon 02

Ответы:

153

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;
}
Лениэль Маккаферри
источник
7
Но он применяется только к небольшим устройствам (менее 768 пикселей): S Источник: getbootstrap.com/css/#tables-responsive
VSP
1
Чтобы включить это для макетов любого размера, вы можете просто удалить адаптивные стили из блока 768 в файле foundation_and_overrides.css.scss. Что-то вроде .table-responseive {width: 100%; переполнение-y: скрыто; переполнение-x: прокрутка; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: сенсорный; } `` `
genkilabs
3
@ ase69s проверьте мой обновленный ответ. Как раз сейчас мне это было нужно на столе с большим количеством столбцов. Добавление overflow-x: autoв пользовательский CSSфайл помогает для больших макетов дисплея.
Лениэль Маккаферри
Вы также можете добавить границу в это определение стиля для единообразия:border: 1px solid #dddddd;
ptim
2
Также можно добавить, .table-responsive td, .table-responsive th { white-space:nowrap; }чтобы ячейки не сжимались автоматически и не добавляли разрывы строк.
rybo111 07
18

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

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

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

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

Луис Эвритнг
источник
5
+1 за ссылку Coyer Link. Я использовал это в прошлом с большим эффектом.
Fetchez la vache
Ага, решение Криса Койера очень изящное. Намного лучше, чем тот, который предоставляется bootstrap или zurbfoundation (они просто добавляют горизонтальную прокрутку).
Адриан Би,
На данный момент, январь 2016 года, адаптивным материалам Койера и других разработчиков исполнилось 5-6 лет, прежде чем все начали использовать Twitter Bootstrap.
Эндрю Копер
1

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

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

Маурисио
источник