Frontender Magazine

Простой (и довольно грубый) способ создания адаптивных таблиц

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

Есть варианты с переворачиванием таблицы набок, превращением ее в круговую диаграмму, постепенным сужением столбцов, возможностью задания столбцов пользователем и даже с частичным прокруткой внутри таблицы. Все эти решения хороши, но тем не менее не лишены недостатков:

  1. Некоторые сложно реализовать в реальных условиях, особенно если в них используются псевдоэлементы ::before для генерации заголовков таблицы.
  2. Некоторые из них (например, круговую диаграмму) можно использовать только для определенных типов табличных данных.
  3. Другие же решения могут сбить с толку конечного пользователя, в частности — решение с пропадающими столбцами.

Хотите увидеть суперпростой способ сделать таблицу адаптивной? Способ, содержащий всего лишь пару строк CSS и не требующий JavaScript? Взгляните:

Способ 1: Суперпростой

Все, что вам нужно сделать - обернуть таблицу в div:

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

И потом добавить простые стили:

.table-container
{
  width: 100%;
  overflow-y: auto;
  _overflow: auto;
  margin: 0 0 1em;
}

Демо 1

Способ 2: Добавление скроллбаров для iOS

Если вы откроете вышеуказанное демо на iOS-устройстве, например, на iPhone, то увидите, что там нет скроллбаров. И хотя пользователи могут сдвигать таблицу для прокрутки, это не так уж и очевидно. Мы можем исправить этот недостаток добавлением следующего CSS:

.table-container::-webkit-scrollbar
{
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-container::-webkit-scrollbar-thumb
{
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

Демо 2

Способ 3: Скроллбары для всех

Если вы хотите заставить все браузеры и устройства отображать скроллбары, то для этого существует целый ряд решений на jQuery:

Способ 4: Добавление градиента

Вы заметили, что таблица выглядит «обрезанной» с правого края? Для придания ему эффекта «растворения» вы можете использовать linear-gradient. Чтобы все хорошо работало на экране любого размера или во время прокрутки пользователем, мы добавим в разметку два новых элемента:

<div class="table-container-outer">
  <div class="table-container-fade"></div>
    <div class="table-container">
      <table>
        ...
      <table>
    </div>
  </div>
</div>

И CSS:

.table-container-outer { position: relative; }

.table-container-fade
{
  position: absolute;
  right: 0;
  width: 30px;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
  background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
  background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
  background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff);
  background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);
}

Демо 4

Итак, вот они, несколько простых (и довольно грубых) решений для создания адаптивных таблиц.

Что думаете?

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Russ Weakley
Игорь Дерябин
Переводчик:
Игорь Дерябин
Сaйт:
http://rodweb.ru/
Twitter:
@ru_rodweb

Комментарии (10 комментариев, если быть точным)

Автар пользователя
cosmiksoul

В четвертой демке градиент налагается на контролы скролла по правой стороне.

Автар пользователя
SilentImp

Да, верно, в оригинальной статье это тоже происходит. Так как это перевод, то решили не трогать. Ну и тут еще вопросы возникают: - кросс-браузерность высоты и ширины скрола? Безопасный вариант 20px, но вряд ли он будет везде подходить идеально. - а что с эстетикой? плавный переход будет просто резко обрываться снизу?

Думаю статья отлично демонстрирует идею, а конкретная имплементация ее в проект — дело читателя. Сдвинуть градиент на 20px вверх — не проблема.

Автар пользователя
rodweb

С помощью JS можно вычислить ширину скроллбара, что-то вроде этого:

var d = document.getElementById('div') console.log(d.offsetHeight - d.clientHeight)

Автар пользователя
persidskiy

Я бы не стал разделять на 4 способа, а вместо всей статьи написал: "Используйте горизонтальные скроллбары".

Отлтчная, банальная и простая идея, круто!

Автар пользователя
mikeyakimenko

Добавили скролл таблице и уже адаптивность? :) Нет не круто. Вообще способ - элементарное решение предоставления контента на устройствах с ограниченной длиной. Правильно и очевидно. Все это пожно решить проще..

Или я не понял великого замысла? :)

Автар пользователя
rodweb

@macgera как "проще"? :-)

Автар пользователя
SilentImp

Coltspb Автор и не разделяет :) Посмотрите название статьи. macgera Адаптивность нужна для того, что бы пользователь мог работать с данными с любого устройства. Если для этого достаточно добавить скрол, то да, скрол может сделать решение адаптиным. А как проще?

Автар пользователя
mikeyakimenko

@rodweb @SilentImp все праавильно скролл. Только я говорил о коде.. а не о том "как добиться адаптивности".

Автар пользователя
iqdesigner

Простое, но очень хорошее решение. Спасибо!

Автар пользователя
nicothin

Видимо, у одного меня не работает... http://take.ms/Je8l4 — что я делаю не так? ))) (Хром самый новый, винда 10)