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

Верстка сложных адаптивных таблиц

На днях была сложная задача по адаптивной верстке - сделать сложную таблицу нормально читаемой с телефона. Ниже сразу покажу пример - что было и что получилось.


(13.02.2019 ) Адаптивная верстка - Сложных таблиц

А вот и живой пример. Таблица меняется при ширине окна браузера в 960px. Или можно посмотреть демо (внизу).


Заголовок 1Заголовок 2Заголовок 3Заголовок 4
a a a a a a a a a a a a a a a a a a a ab b b b b b b b b b b b b b b b b b b bc c c c c c c c c c c c c c c c c c c cd d d d d d d d d d d d d d d d d d d d
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 12 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 23 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 34 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4

Тут все довольно просто. Настоящий заголовок скрывается, а нужные подзаголовки выводятся через псевдоэлементы :after. При этом, некоторые ячейки таблицы можно оставить блоками с шириной 100%.


Единственный минус метода - практически каждую таблицу придется редактировать вручную.