Оптимизация сайта для планшетов и телефонов - 2

Действительно интересно, спасибо :)

Я ориентировался на то, что кроме "screen" есть еще куча других параметров:

http://htmlbook.ru/css/value/media

Видимо, пример из Гугла трактуется как all.

Адаптивные таблицы при помощи только CSS стилей 2

Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой:

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

Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.

У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку.

Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми. :)

Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?

Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения.

Спасибо за отзывы!

Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно.

Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.

А в этот раз у таблиц на сайте клиента был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого. Поэтому CSS был мной немного переделан:

Если использовать только первую строку стилей, таблица будет сжиматься нормально. Но вот растягиваться на 100% она не хочет. Только по ширине содержимого.

А вот добавление table:before c display: table-cell растягивает содержимое на 100%.

Магия :)

Ну и важный момент про шрифты!

Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую.

Да и 12 пикселей - это уже совсем мелко для телефона.

запилите онлайн демку?

в bootstrap есть пример с обертыванием таблицы дивом - http://getbootstrap.com/css/#tables-responsive

как по мне такой вариант предпочтителен, таблица останется исходной

Конечно предпочтительнее!

Зачем, если можно обернуть все в обычный div со стилями? :)

Промбема в другом. На сайтах бывают тысячи таблиц. И еще работают редакторы, которым придется отдельно рассказывать все и показывать...

Да, перепроверил прошлый свой пример. Там 1 колонка слишком сильно ужимается. Действительно нужно ставить в стилях ширину для каждой, либо прописать что-то наподобие width: 1%; тогда браузер сам подберет размер. Хотя, не очень люблю этот вариант.

---------- Добавлено 06.04.2016 в 02:45 ----------

Блин. Я ее удалил уже. Вот сделал вам новую со всеми примерами: http://dikij.com/test2.php

Никаких красивостей и дополнительного кода. Только таблицы и как на них влияют разные стили и методы адаптации.

Применил твой совет к логотипу, но лого у меня не простое, а меняется при наведении (Png трюк с прозрачностью) Но вот выплыла проблема, как поставить теперь лого по центру нашего фона? надеюсь поможешь с данной проблемой

Почему логотипы, да и в целом картинки растягиваются и получаются такими страшными (порой с пикселизацией) в мобильном хроме? У большинства так.

Думаю, я и правда могу помочь в обоих случаях. Но я не умею править стили ПО ОПИСАНИЮ :)

Можно примеры?

https://jsfiddle.net/82nq9jug/4/

Андрей, надеюсь вы поможете. Хотя возможно есть смысл в уменьшении картинки ниже 600 по монитору