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

84

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

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

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

  • 0
    Что бы вы хотели случиться?
Теги:

4 ответа

149

В 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
  • 1
    Чтобы включить это для макетов всех размеров, вы можете просто удалить адаптивные стили из блока 768 в файле foundation_and_overrides.css.scss. Что-то вроде `` `.table-responseive {width: 100%; переполнение-у: скрыто; переполнение-х: прокрутка; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: сенсорный; } `` `
Показать ещё 5 комментариев
21

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

Поделиться
16

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

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

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

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

Поделиться
  • 5
    +1 для ссылки Coyer. Я использовал это в прошлом с большим эффектом.
  • 0
    Да, решение Криса Койера очень опрятно. Гораздо приятнее, чем тот, который предоставляется при начальной загрузке или zurbfoundation (они просто добавляют горизонтальную прокрутку).
Показать ещё 1 комментарий
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 работать с большими таблицами (много столбцов).

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню