D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

      Адаптивная верстка таблиц. От мучений к разгрому

         Я сейчас заканчиваю переделку сайта petergid.ru, состоящего процентов на 80 из сплошных таблиц. И что-то мне уже давно хочется рассказать немного о том, что с этими таблицами можно сделать в адаптивном дизайне.
         Начну я с полезных советов, а закончу полным разгромом.

(05.03.2016 blogger) Мобильная верстка таблиц для сайта petergid.ru - Заказ на адаптивный дизайн

         Для начала, неплохо бы попробовать с таблицей договориться. Например, настроив автоматические переносы слов в ней через hyphens: auto; к сожалению, работает это далеко не во всех браузерах. Но самые послушные позволят-таки втиснуть даже самые длинные слова в мелкие ячейки. Причем, сохраняя знак переноса и какой-то смысл.

         Второй логичный шаг - прописать для совсем маленьких размеров экрана принудительное разрывание слов через word-break: break-all; в CSS. Да, вариянт не на все 100% красивый, но при наличии доступа только к стилям и шаблонам, он вполне бывает оправдан. А самое хорошее в том, что у меня все браузеры с удовольствием разбивали длинные слова.

         Третий шаг можно поставить вместо второго. Если есть доступ к базе, можно разбивать слова тегом <WBR>, указав им конкретное место переноса для слова. Долго, но довольно красиво. Очень надеюсь, что поисковики отлично понимают такие слова.

         Четвертое - убираем стилями все отступы у таблицы и ее ячеек. Я люблю прописывать их в процентах, чтобы при минимальной ширине экрана они «схлопывались». Можно еще немного поколдовать над шириной рамок.

         А вот пятый способ пришел мне в голову при работе над сайтом grostal.ru. Следите за руками: td {display: inline-block !important; width: 100% !important;}
         Да, мы делаем таблицу адаптивной, просто отображая ячейки как блоки. Можно использовать и просто block, но именно inline-block ведет себя «как картинка», что позволяет красиво переносить ячейки друг под друга при уменьшении ширины (без float) или вообще задать им width: auto и наслаждаться их реальной шириной.
         В общем, в любом случае мы получим вертикальные строки или «плавающие» ячейки вместо горизонтальной таблицы.
         Демка.

         Вот так можно адаптировать таблицы и табличную верстку для мобильных устройств. Понятно, что для сложного отчета с кучей ячеек лучше зафиксировать ширину, уменьшить шрифт и назначить диву выше прокрутку через overflow: auto.
         Но вот для переноса ячеек с товарами или меню на новую строку, да и просто для «переделки» табличной верстки в блочную, метод подходит просто отлично!

         
         
Главная, 1,
( 44 )