Адаптивна обробка таблиць у 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 і менше, ви можете застосувати адаптивні таблиці до всіх роздільних здатностей, оновивши файл:

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 на великих таблицях (багато стовпців).

Сподіваюся, це комусь допомагає.