Адаптировать таблицу под мобильный
Адаптировать таблицу под мобильныйСкачать файл - Адаптировать таблицу под мобильный
Только полноправные пользователи могут оставлять комментарии. TM Feed Хабрахабр Geektimes Тостер Мой круг Фрилансим. Хабрахабр Публикации Пользователи Хабы Компании Песочница. Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего: Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему. Способ от Chris Coyier Описание и демо на русском, оригинал и демо на английском. Суть в том, что таблица вытягивается вертикально, в каждой строке остается только два столбца: Минус такого способа в том, что в результате получается слишком длинная таблица, и ее придется долго прокручивать. Способ от Scott Jehl Демо Преобразует обычную таблицу в красивую диаграмму. Такой способ подойдет не для всех данных, но выглядит результат очень интересно. Как говорится, дешево и сердито. Разработка веб-сайтов 4,1k авторов , 9,7k публикаций. Разработка игр 1,3k авторов , 2,9k публикаций. HTML авторов , публикаций. JavaScript 1,9k авторов , 4,1k публикаций. CSS автора , 1,2k публикаций. Разработка под iOS автора , 1,9k публикаций. Java 1,1k авторов , 2,2k публикаций. Разработка под Android 1k авторов , 2,3k публикаций. PHP 1,4k авторов , 2,6k публикаций. Разработка под e-commerce автора , публикаций. Добавить в закладки Комментарии 21 НЛО прилетело и опубликовало эту надпись здесь. НЛО прилетело и опубликовало эту надпись здесь. Первый вариант очень неудобен. Таблица ж не зря имеет такую форму. Третий вообще непонятно что, данные куда-то пропали из двух измерений осталось одно. Каждый вариант имеет право на жизнь в определённых случаях. И каждый способ может быть удобным в своём отельном идеальном случае. На каждый случай нужно подбирать специфичный способ, один из представленных в этом посте, какой либо другой или смешанные. Для реализации таблиц в адаптивных интерфейсах нет какого то универсального способа. Мне кажется одного способа точно не хватает: Таблица есть таблица, она должна быть двухмерной, чтобы можно было быстро выделить глазом как строку, так и слолбик. Решения, которые эту логику ломают, имхо, не годятся для реального применения. Кстати, второй вариант можно заставить выглядеть как первый, только скролл сделать оризонтальным и дискретным чтобы пролистывалось не произвольное число пикселей а одна-две или 3 столбика, в зависимости от силы скролла. Второй вариант крут, если данные не нужно сравнивать друг с другом. Третий вариант тут лучше, но вот если величины отличаются на несколько порядков — получится каша. Отображать часть таблицы, по тапу выдавать полные данные как в первом варианте. Я бы предложил ещё вариант: А, ну да, просто в примере первый столбец зафиксирован…. Это кстати мешает, например если значения ячеек в первом столбце не помещаются на дисплей…. Есть еще такое решение, похоже на второй вариант dbushell. Я тсолкнулся один раз, мне подсказал американский коллега, что лучше разбить таблицу. Остальные варианты… нужно пробовать! Причём сделать так, чтобы при клике ячейка увеличивалась в новом слое выше, а при повторном — уменьшалась. Ещё идея с барабаном понравилась. Оставлять на месте только заголовки таблицы, а само поле данных таблицы делать перемещаемым, как при вращении барабана. Метки лучше разделять запятой. Сейчас Вчера Неделя День сисадмина: Быстрые сетки для верстальщиков 7,4k Увольнение — это маленькая смерть. Как сохранить ценного специалиста решившего уволиться? Интересные публикации Хабрахабр Geektimes. Президент России подписал закон о запрете анонимайзеров и VPN GT. Гонконг вскоре может задохнуться под завалами собственных отходов GT. Элементы национальной инновационной системы США, ч. Биомеханика и искусственный интеллект в медицине. Лекция на YaC Быстрые сетки для верстальщиков. Разделы Публикации Хабы Компании Пользователи Песочница. Информация О сайте Правила Помощь Соглашение Конфиденциальность. Услуги Реклама Тарифы Контент Семинары.
Оптимизация таблиц для просмотра на мобильных устройствах
Вёрстка адаптивной таблицы
Как заново влюбить в себя мужчину
Определите регион россии по его краткому описанию
Адаптивная таблица (как сделать адаптивную таблицу Table на CSS — пример)
Какие сегодня спортивные события
Адаптивные таблицы на чистом CSS
Курсы для учителей начальных классов