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

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

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

      Адаптивные таблицы при помощи 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. Иначе проверка сайтом просто не будет пройдена. Насколько помню, это доступно пока только в новом Вебмастере.

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