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

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

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

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

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

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

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

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

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

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

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

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

Минусы: 

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

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

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

Минусы:

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

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

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

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

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

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

Минусы:

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

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

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

Пакетная загрузка картинок в поле типа ImageField CCK (Drupal)

Декабрь 17, 2011 г.

В wordpress, к примеру, такая возможность уже есть в базовой комплектации движка. А что касается drupal-a, в 7й версии хоть и интегрировали в движок что ...

Читать

Проверка кода ИНН на PHP

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

В этом году писал реализацию данной функции для проекта C2C-base. Оказывается, бывает ИНН двух видов - для юридических лиц и физ лиц - 10 или 12 знаков соответственно. Проверка большинства подобных кодов осуществляется по контрольным цифрам, содержащимся ...

Читать

Xdebug + PHP-FPM + WSL + VS Code: Настройка за 5 минут

Июнь 13, 2025 г.

Уже писал гайдик на эту тему, но там я рассказывал о процессе настройки на примере PHP7. Решил обновить информацию, т.к. PHP 8 используется 3я версия xdebug, ...

Читать

Программное создание публикации в Drupal 7

Апрель 15, 2017 г.

Еще одна шпаргалка по Drupal 7. Мы создадим публикацию из PHP, добавим пользовательские поля и даже загрузим файл (изображение) в поле соответствующего типа. Сначала мы создадим структуру публикации (объект node).  Нам понадобится указать данные, ...

Читать
 

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

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



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