Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно
Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.
Это отлично срабатывало при переделке сайтов aliexpressblog.ru и nost.ru этого хватало. А вот в адаптации таблиц на topdealers.ru возникли некоторые проблемы.
Прошлый раз прокрутку в таблицах (без добавления дополнительных оборачивающих элементов) удалось включить вот такими стилями:
table {border: 1px solid #333333;
width: 100% !important;
overflow: auto !important;
display: block !important;}
table tbody {display: table !important;
width: 99.9% !important;}
А в этот раз у таблиц был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого.
Поэтому код CSS для прокрутки таблиц был мной переделан:
table {border: 1px solid #333333; display: block !important; width: 99% !important; overflow: auto !important;}
table:before {content: ""; display: table-cell !important; overflow: auto !important; width: 1% !important;}
Если использовать только первую строку стилей для table, таблица будет сжиматься нормально. Да и прокрутка появляется, но вот растягиваться на 100% она не хочет. Только по ширине содержимого. А вот добавление псвдоэлемента table:before c display: table-cell отлично растягивает содержимое на 100%. Причем, насколько вижу, вполне кроссбраузерно.
Единственное, пришлось чуть изменить ширину столбцов, чтобы сайт смотрелся симпатичнее.
Ну и важный момент про шрифты!
Для прохождения проверки в Яндексе нужно в адаптивной версии сайта увеличить весь текст минимум до 12px. Иначе проверка сайтом просто не будет пройдена. Насколько помню, это доступно пока только в новом Вебмастере.
