Непослушные HTML таблицы

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

Столбцы таблиц нельзя переносить (даже если и можно было бы их переносить, все равно этого нельзя делать). И даже <table> с 4-5 столбцами становится неудобной и неуклюжей, разнося в пух и прах вашу возможно адаптивную верстку; действуя как слон в посудной лавке, когда вы смотрите на страницу на девайсе с 400 точками по ширине.

Что можно сделать, если таблица необходима?

Рассмотрим несколько подходов к решению задачи.

Вариант — обойтись без таблиц, тоже имеет место для существования. К примеру, таблицу можно разместить в файле формата более для неё подходящем — pdf, xls и т.п. А на сайте сделать ссылку на этот файл. Так поступают банки, публикуя свои тарифные руководства.

Но когда таблица — это  важная часть содержания статьи, к которой нужно обращаться по мере чтения материала, то так проблему не обойти.

Таблица — картинка

Можно заменить таблицу картинкой. Это позволит работать с масштабом изображения или прибегнуть к приёму — thumbnail-fullsize. Это также позволяет более качественно оформить таблицу в каком то специализированном редакторе.

Задав CSS, вроде

вы получите авто масштабирование картинки под любой размера окна браузера. Как бы пользователь не «играл» с размерами окна, картинка не будет вылазить за края и иметь идеальные пропорции.

В статью можно вставить не полномасштабное изображение, а превью со ссылкой на полный размер (+ на ваш вкус добавить плагин полноэкранного просмотра).

Минусы: 

Так как таблица будет в виде картинки, а поисковики ещё не «умеют» читать с картинки, то о содержимом таблицы поисковый робот узнает только по описанию изображения (атрибутам alt и title и окружающему тексту).

Оптимизация таблиц

Иногда возможно «разбить» или организовать данные в таблице так, что она распадется на несколько более компактных объектов. Получившиеся таблицы станут влезать в верстку и будут нормально отображаться на любых устройствах.

Минусы:

Не всегда применимо, да и ограничения по минимальной ширине шаблона останутся.

Встраивание в контейнер с горизонтальной прокруткой

Так как таблица и окружающий её текст находятся в одном и том же контейнере, то слишком широкая таблица нарушает верстку. Этого можно избежать, обернув таблицу в собственный адаптивный по ширине контейнер.

Обертка для таблицы должна показывать горизонтальную прокрутку, если это требуется. Добиваемся этого с помощью следующего CSS:

И, конечно, от операции «оборачивания таблица в контейнер» редактора лучше избавить, выполнив это программно перед выводом в шаблоне:

Таблица получает горизонтальную степень свободы, её становится возможным пролистывать вправо-влево независимо от остального содержания статьи. Читатель доволен. Редактор доволен, что ничего не надо больше делать со статьёй. А программист доволен, что нашел решение вечно проблемы верстки таблиц. :) Хеппи енд.

Минусы:

Хотя все счастливы, но минусы есть.

Длинные таблицы на десктопе можно «листать» влево-вправо только дойдя до нижней границы элемента <table>, т.к. линейка прокрутки отображена именно там. На мобильных устройствах такой проблемы нет, листать можно «хватаясь» за таблицу в любом месте.

Написать комментарий

Мало букафф? Читайте есчо !

Имена блоков в Drupal 7 по умолчанию

Сентябрь 5, 2015 г.

Соответствующие системные названия регионов для вывода блоков можно подсмотреть в верстке. Ещё они явно прописаны в тестовой теме в модуле block. ...

Читать

box-sizing: padding-box на Chrome

Сентябрь 19, 2015 г.

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать! Можно отказаться, но удобно ведь? Самый простой выход написать вместо злополучного экспериментального padding-box: [crayon-5d2df11c9929c706101044/] Во ...

Читать

 

Комментарии к «Непослушные HTML таблицы»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: