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

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

А вот и живой пример. Таблица меняется при ширине окна браузера в 960px. Или можно посмотреть демо (внизу).
Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
a a a a a a a a a a a a a a a a a a a a | b b b b b b b b b b b b b b b b b b b b | c c c c c c c c c c c c c c c c c c c c | d 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 1 | 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 | 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 | 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 |
Тут все довольно просто. Настоящий заголовок скрывается, а нужные подзаголовки выводятся через псевдоэлементы :after. При этом, некоторые ячейки таблицы можно оставить блоками с шириной 100%.
Единственный минус метода - практически каждую таблицу придется редактировать вручную.