Адаптивная верстка таблиц. От мучений к разгрому
Я сейчас заканчиваю переделку сайта petergid.ru, состоящего процентов на 80 из сплошных таблиц. И что-то мне уже давно хочется рассказать немного о том, что с этими таблицами можно сделать в адаптивном дизайне.
Начну я с полезных советов, а закончу полным разгромом.
Для начала, неплохо бы попробовать с таблицей договориться. Например, настроив автоматические переносы слов в ней через 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.
Но вот для переноса ячеек с товарами или меню на новую строку, да и просто для «переделки» табличной верстки в блочную, метод подходит просто отлично!
