Таблицы — это не тот элемент верстки, который можно сделать адаптивным. Все трюки по адаптивности разбиваются о крутые берега целесообразности самих таблиц.
Столбцы таблиц нельзя переносить (даже если и можно было бы их переносить, все равно этого нельзя делать). И даже <table> с 4-5 столбцами становится неудобной и неуклюжей, разнося в пух и прах вашу возможно адаптивную верстку; действуя как слон в посудной лавке, когда вы смотрите на страницу на девайсе с 400 точками по ширине.
Что можно сделать, если таблица необходима?
Рассмотрим несколько подходов к решению задачи.
Вариант — обойтись без таблиц, тоже имеет место для существования. К примеру, таблицу можно разместить в файле формата более для неё подходящем — pdf, xls и т.п. А на сайте сделать ссылку на этот файл. Так поступают банки, публикуя свои тарифные руководства.
Но когда таблица — это важная часть содержания статьи, к которой нужно обращаться по мере чтения материала, то так проблему не обойти.
Таблица — картинка
Можно заменить таблицу картинкой. Это позволит работать с масштабом изображения или прибегнуть к приёму — thumbnail-fullsize. Это также позволяет более качественно оформить таблицу в каком то специализированном редакторе.
Задав CSS, вроде
|
1 2 3 4 |
img.table { max-width: 100%; height: auto; } |
вы получите авто масштабирование картинки под любой размера окна браузера. Как бы пользователь не «играл» с размерами окна, картинка не будет вылазить за края и иметь идеальные пропорции.
В статью можно вставить не полномасштабное изображение, а превью со ссылкой на полный размер (+ на ваш вкус добавить плагин полноэкранного просмотра).
Минусы:
Так как таблица будет в виде картинки, а поисковики ещё не «умеют» читать с картинки, то о содержимом таблицы поисковый робот узнает только по описанию изображения (атрибутам alt и title и окружающему тексту).
Оптимизация таблиц
Иногда возможно «разбить» или организовать данные в таблице так, что она распадется на несколько более компактных объектов. Получившиеся таблицы станут влезать в верстку и будут нормально отображаться на любых устройствах.
Минусы:
Не всегда применимо, да и ограничения по минимальной ширине шаблона останутся.
Встраивание в контейнер с горизонтальной прокруткой
Так как таблица и окружающий её текст находятся в одном и том же контейнере, то слишком широкая таблица нарушает верстку. Этого можно избежать, обернув таблицу в собственный адаптивный по ширине контейнер.
|
1 2 3 4 5 |
<div class="table-wrapper"> <table> ... </table> </div> |
Обертка для таблицы должна показывать горизонтальную прокрутку, если это требуется. Добиваемся этого с помощью следующего CSS:
|
1 2 3 |
.table-wrapper { overflow: auto; } |
И, конечно, от операции «оборачивания таблица в контейнер» редактора лучше избавить, выполнив это программно перед выводом в шаблоне:
|
1 2 3 4 5 6 7 8 9 |
echo tableWrap($content); function tableWrap($content) { return str_replace( array('<table ', '</table>'), array('<div class="table-wrapper"><table ', '</table></div>'), $content ); } |
Таблица получает горизонтальную степень свободы, её становится возможным пролистывать вправо-влево независимо от остального содержания статьи. Читатель доволен. Редактор доволен, что ничего не надо больше делать со статьёй. А программист доволен, что нашел решение вечно проблемы верстки таблиц. :) Хеппи енд.
Минусы:
Хотя все счастливы, но минусы есть.
Длинные таблицы на десктопе можно «листать» влево-вправо только дойдя до нижней границы элемента <table>, т.к. линейка прокрутки отображена именно там. На мобильных устройствах такой проблемы нет, листать можно «хватаясь» за таблицу в любом месте.