Как сделать таблицу мобильная версия
Адаптивная таблица для мобильных устройств
На одном из предыдущих уроков, мы рассматривали самый простой способ, как сделать таблицу адаптивной. Суть адаптации таблицы сводилась к появлению горизонтальной полосы прокрутки, на определенной ширине экрана.
Однако появление горизонтальной полосы прокрутки на маленьких экранах мобильных устройств, приведет пользователя в бешенство. Неужели никак нельзя избежать полосы прокрутки? Можно! И я сейчас покажу вам, как это сделать.
HTML разметка
Для управления таблицей, мы обернули её в блок с классом container.
| Название услуги | Сайт | Сроки | Количество страниц | Стоимость |
|---|---|---|---|---|
| Адаптация таблиц | Лендинг | 5 дней | 1 | 1 000 руб |
| Адаптация таблиц | Корпоративный сайт | 6 дней | 5 | 2 000 руб |
| Адаптация таблиц | Интернет-магазин | 7 дней | 15 | 5 000 руб |
Атрибут data-label
CSS правила
.container <
min-width: 320px;
max-width: 100%;
padding: 0 15px;
box-sizing: border-box;
>
table <
border-collapse: collapse;
width: 100%;
margin: 20px 0;
>
table td, table th <
padding: 10px;
border: 1px solid #cbbdbd;
>
tr:nth-child(even) <
background-color: #f0f4c3
>
Адаптируем таблицу
При уменьшении размеров экрана, содержимое таблицы становится трудно различимым. В адаптивном режиме браузера, определяем контрольную точку, когда пора уже перестроить ячейки (флекс-элементы), в столбик (поменять направление главной оси).
@media (max-width: 720px) <
// переопределяем CSS правила
>
Скроем названия в шапке таблицы.
.container table thead <
display: none;
>
Преобразуем строчные ряды таблицы в блочные элементы. Теперь таблица имеет совсем другой вид – ячейки встали в столбик.
.container table tr <
display: block;
>
Назначим ячейку флекс-контейнером, а данные ячеек раскидаем по правому и левому краю вдоль главной оси.
.container table td <
display: flex;
justify-content: space-between;
font-size: 14px;
>
При помощи псевдоэлемента before и функции attr(), подставим в каждую ячейку значение data-label.
.container table td::before <
content: attr(data-label);
font-weight: bold;
margin-right: 20px;
>
Для просмотра, как работает адаптация таблицы, перейдите на CodePen и нажмите F12.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 1 ):
Очень востребованая возможность при вёрстке сайтов. Спасибо Михаилу!
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Таблицы с данными в адаптивном дизайне
Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего: 
Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.
1. Способ от Chris Coyier
Суть в том, что таблица вытягивается вертикально, в каждой строке остается только два столбца: заголовок и данные. Минус такого способа в том, что в результате получается слишком длинная таблица, и ее придется долго прокручивать.
2. Способ от Zurb.com
Хороший способ на Javascript/CSS, который добавляет горизонтальную прокрутку для ячеек с данными, при этом заголовки остаются на месте, очень удобно.
3. Способ от Scott Jehl
Преобразует обычную таблицу в красивую диаграмму. Такой способ подойдет не для всех данных, но выглядит результат очень интересно.
4. Способ от Todd Parker
В этом способе таблица на маленьком экране просто прячется под «спойлер». Как говорится, дешево и сердито.
Ой, у вас баннер убежал!
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
GeekUniversity открывает набор на факультет веб-дизайна
Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов
[Перевод] HTML5 Адаптивные изображения
Заказы
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 21
Первый вариант очень неудобен. Таблица ж не зря имеет такую форму. Третий вообще непонятно что, данные куда-то пропали (из двух измерений осталось одно).
2 ничего. 4 — не совсем способ, конечно, но полагаю, если по высоте на экран влезет, то тоже имеет право на жизнь. 2 и 4 вообще полезно было бы совместить.
Каждый вариант имеет право на жизнь в определённых случаях. И каждый способ может быть удобным в своём отельном идеальном случае. На каждый случай нужно подбирать специфичный способ, один из представленных в этом посте, какой либо другой или смешанные. Для реализации таблиц в адаптивных интерфейсах нет какого то универсального способа.
Мне кажется одного способа точно не хватает: он напоминает 1-ый вариант, но при этом убираются заголовки некоторых столбцов — это возможно в определённых случаях когда интуитивно понятно назначение определённых значений таблицы.
Добавление таблицы в приложениях Office на мобильном устройстве
В Word, Excel и PowerPoint для мобильных устройств можно добавить таблицу, выбрать стандартный шаблон из коллекции и добавить или удалить строки либо столбцы. Вот как это сделать:
На планшете с Android в файле Office выберите, где нужно вставить таблицу, а затем последовательно коснитесь пунктов Вставка > Таблица.
На телефоне с Android в файле Office выберите, где нужно вставить таблицу, коснитесь значка Правка 
и выберите команды Главная > Вставка > Таблица.
Вкладка Таблица выглядит так:
На планшете с Android
На телефоне с Android
На планшете с Android в файле Office выберите ячейку в диапазоне, который вы хотите преобразовать в таблицу, и нажмите кнопку вставить > таблицу.
На телефоне с Android в файле Office выберите ячейку в диапазоне, который вы хотите преобразовать в таблицу, нажмите значок редактирования и выберите Главная > Вставить таблицу>.
Вкладка Таблица выглядит так:
На планшете с Android
На телефоне с Android
В файле Office нажмите в любом месте таблицы, а затем на вкладке Таблицы выберите команду Вставка.
Выберите подходящий вариант в меню. Вы можете добавить строки над строкой, в которой находится курсор, строки под ней, а также столбцы слева и справа.
В файле Office коснитесь столбца или строки, которые требуется удалить, а затем на вкладке Таблицы выберите команду Удалить.
Выберите подходящий вариант в меню. Вы можете удалить строки, столбцы или всю таблицу.
Чтобы вырезать, копировать, вставить или очистить содержимое определенной ячейки, дважды коснитесь ее, а затем выберите действие на панели команд.
Чтобы вырезать, копировать, вставить, очистить или удалить всю таблицу, коснитесь блока выделения в верхнем левом углу таблицы и выберите действие на панели команд.
Чтобы вырезать, копировать, вставить, очистить или удалить отдельную строку, коснитесь блока выделения слева от строки и выберите действие на панели команд.
Чтобы вырезать, копировать, вставить, очистить или удалить отдельный столбец, коснитесь блока выделения над столбцом и выберите действие на панели команд.
Чтобы быстро добавить столбец или строку, коснитесь блока выделения над столбцом или слева от строки и нажмите знак «плюс».
На iPad в файле Office выберите, где нужно вставить таблицу, а затем последовательно коснитесь пунктов Вставка > Таблица.
На iPhone в файле Office выберите, где нужно вставить таблицу, коснитесь значка Правка и выберите команды Главная > Вставка > Таблица.
Вкладка Таблица выглядит так:
На iPad в файле Office выберите ячейку в диапазоне, который вы хотите преобразовать в таблицу, и нажмите кнопку вставить > таблицу.
На iPhone в файле Office выберите ячейку в диапазоне, который вы хотите преобразовать в таблицу, нажмите значок редактирования и выберите Главная > Вставить таблицу>.
Вкладка Таблица выглядит так:
В файле Office нажмите в любом месте таблицы, а затем на вкладке Таблицы выберите команду Вставка.
Выберите подходящий вариант в меню. Вы можете добавить строки над строкой, в которой находится курсор, строки под ней, а также столбцы слева и справа.
В файле Office коснитесь столбца или строки, которые требуется удалить, а затем на вкладке Таблицы выберите команду Удалить.
Выберите подходящий вариант в меню. Вы можете удалить строки, столбцы или всю таблицу.
Чтобы вырезать, копировать, вставить, очистить или удалить всю таблицу, коснитесь стрелки в верхнем левом углу таблицы и выберите действие на панели команд.
Чтобы вырезать, копировать, вставить, очистить или удалить содержимое определенной ячейки, дважды коснитесь ее, а затем выберите действие на панели команд.
На планшете с Windows в файле Office выберите, где нужно вставить таблицу, а затем последовательно коснитесь пунктов Вставка > Таблица.
На телефоне с Windows в файле Office выберите, где нужно вставить таблицу, коснитесь пункта Дополнительно 
и последовательно выберите команды Главная > Вставка > Таблица.
Вкладка Таблица выглядит так:
На планшете с Windows
На телефоне с Windows
В файле Office нажмите в любом месте таблицы, а затем на вкладке Таблицы выберите команду Вставка.
Выберите подходящий вариант в меню. Вы можете добавить строки над строкой, в которой находится курсор, строки под ней, а также столбцы слева и справа.
В файле Office коснитесь столбца или строки, которые требуется удалить, а затем на вкладке Таблицы выберите команду Удалить.
Выберите подходящий вариант в меню. Вы можете удалить строки, столбцы или всю таблицу.
С помощью команды Замещающий текст можно добавить замещающий текст в таблицу.
В файле Office коснитесь столбца или нажмите блок выделения в верхнем левом углу таблицы, чтобы выделить всю таблицу.
На планшете с Windows на вкладке Таблица нажмите значок Размер ячейки, а затем выберите Замещающий текст. На телефоне с Windows просто коснитесь значка Замещающий текст.
Введите название и описание таблицы.
Чтобы вырезать, копировать, вставить, очистить или удалить всю таблицу, коснитесь блока выделения в верхнем левом углу таблицы и выберите действие на панели команд.
Чтобы вырезать, копировать, вставить, очистить или удалить отдельную строку, коснитесь блока выделения слева от строки и выберите действие на панели команд.
Чтобы вырезать, копировать, вставить, очистить или удалить отдельный столбец, коснитесь блока выделения над столбцом и выберите действие на панели команд.
Чтобы вырезать, копировать, вставить или очистить содержимое определенной ячейки, дважды коснитесь ее, а затем выберите действие на панели команд.
Чтобы быстро добавить столбец или строку, коснитесь блока выделения над столбцом или слева от строки и нажмите знак «плюс».
Примечание: Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Была ли информация полезной? Для удобства также приводим ссылку на оригинал (на английском языке).
10 приложений для работы с электронными таблицами на Android
Электронные таблицы — это мощный инструмент, используемый представителями многих профессий. С их помощью вы можете сделать многое: упорядочить свои данные, ввести новые и т.д.
Сегодня есть множество подобных приложений и для пользователей мобильных. Конечно, наиболее значимыми фигурами в этой области остаются Microsoft Excel и Google Sheets. Их мы рекомендуем практически всем.
Впрочем, есть и другие варианты, если эти два по какой-то причине вам не подходят. В этом обзоре мы рассмотрим лучшие приложения электронных таблиц для Android.
AndrOpen Office
Цена: Бесплатно.
AndrOpen Office — это первая официальная мобильная версия OpenOffice. Приложение включает в себя: текстовый редактор, инструменты для работы с электронными таблицами и презентациями и некоторые дополнительные функции. С его помощью вы можете даже рисовать и считать. Но мы-то ведём речь об электронных таблицах.
Этот инструмент в AndrOpen Office на удивление хорош и функционален, особенно с учётом того, что это мобильное приложение. Вы можете импортировать файлы Microsoft Excel (XLS и XLT), что делает переход с Microsoft Office сравнительно простым и безболезненным. В целом, AndrOpen Office — отличная альтернатива решениям от Google и Microsoft.
Docs To Go
Цена: Бесплатно / до 1 390 рублей.
Docs To Go — неплохой вариант мобильного офиса. Он включает в себя наиболее значимые элементы, в том числе инструменты для работы с текстами, презентациями и электронными таблицами. Последний поддерживает файлы Microsoft Office Excel, легко настраивается и пригоден для многих относительно простых задач. Электронные таблицы от Docs To Go могут похвастаться наличием 111 различных функций, включая различные настройки столбцов и сортировку.
Google Sheets
Цена: Бесплатно.
Google Sheets — один из двух крупнейших конкурентов в области электронных таблиц на мобильных устройствах. Он обладает множеством функциональных возможностей: подключается к Google Диску, имеет кроссплатформенную поддержку (через интернет), совместим с файлами Microsoft Office. Многим пользователям особенно нравятся его возможности совместной работы: несколько человек могут одновременно работать с одной и той же таблицей в режиме реального времени. Кроме того, Google Sheets может похвастаться множеством функций и настроек.
Конечно, Excel является более мощным приложением для работы с электронными таблицами, но зато Google Sheets намного доступнее и проще для новичков. Приложение совершенно бесплатно и может использоваться с Google Drive, где вам бесплатно будут доступны 15 ГБ пространства.
Microsoft Excel
Цена: Бесплатно / до 339 рублей.
Если сравнивать функциональные возможности различных приложений для работы с электронными таблицами, то, пожалуй, лучшим из лучших можно назвать Microsoft Excel. Это очень мощный инструмент, не случайно множество предприятий выбрали именно его для своей работы. Мобильная версия, пригодная для простых вещей, бесплатна, но рекомендуем вам приобрести подписку на Microsoft 365, чтобы разблокировать лучшие функции. Существует вариант однократной оплаты, но только для настольных компьютеров.
OfficeSuite
Цена: Бесплатно / до 3 899 рублей.
OfficeSuite — один из интереснейших конкурентов Microsoft Office и Google Drive для мобильных устройств. Он существует уже давно и обзавёлся множеством функций. С точки зрения удобства использования, это приложение удивительно хорошее, хотя в бесплатной версии имеется лишь самый необходимый минимум функций.
Подписка стоимостью 3 899 рублей в год избавит вас от рекламы, добавит 154 формата документов и откроет два десятка дополнительных функций. Хорошая новость заключается в том, что лицензия пригодна и для мобильных устройств (Android и iOS), и для ПК, поэтому заплатить вам придётся только один раз.
Polaris Office
Цена: Бесплатно / до 3 190 рублей.
Polaris Office — ещё одна более старая и более доработанная альтернатива для Microsoft Office и Google Drive. Это приложение существует, кажется, целую вечность и имеет множество функций. С его помощью вы можете использовать электронные таблицы для разных целей, включая построение графиков.
Polaris Office имеет приятный и довольно современный интерфейс в стиле Material Design. Увы, приложение содержит ошибки, в противном случае его можно было бы считать очень хорошим вариантом.
Quip — отличный вариант для бизнеса. Для своей цены он имеет приличное количество современных функций, в том числе возможность редактировать документы совместно с другими людьми и общаться с ними напрямую через приложение. Quip имеет более 400 функций для электронных таблиц и позволяет встраивать их в любые документы. Приложение ориентировано в первую очередь на корпоративных пользователей, но вы можете использовать его и для личных целей.
SmartOffice
Цена: Бесплатно.
SmartOffice существует уже давно и является одним из наиболее зрелых приложений для работы с электронными таблицами. Список его функций довольно длинный, но, в целом, оно не такое мощное и привлекательное, как многие его конкуренты. Мы по-прежнему считаем, что Google Sheets лучше, но SmartOffice — хорошая альтернатива, особенно если вы хотите редактировать таблицы в автономном режиме.
SmartOffice совершенно бесплатен. Более того, приложение использует Dropbox и Google Drive в качестве своего облачного хранилища, поэтому вам не нужно платить ни за что. В целом, SmartOffice не самый мощный, но в силу отсутствия платы должен понравиться многим пользователям.
Table Notes
Цена: Бесплатно / до 1 499 рублей.
Table Notes — это нечто немного другое. Большинство приложений для электронных таблиц являются частью больших офисных пакетов. Table Notes не является офисным приложением. Более того, он больше похож не на приложение электронных таблиц, а на приложение для заметок с функцией электронных таблиц. Table Notes очень прост и не поразит вас сотнями функций. Зато с его помощью вы сможете добавлять фотографии, аудио и рисунки.
Приложение поддерживает подписи, даты и время. Наконец, оно позволяет вводить математические формулы для более глубокой интеграции. Table Notes имеет единый ценник, а не только подписки, но при этом вы можете не увидеть многих функций, включая возможность импорта документов Excel. В целом, это неплохое приложение.
WPS Office
Цена: Бесплатно / до 29 990 рублей.
WPS Office долгое время считался лучшим бесплатным офисным приложением. Оно и в наши дни бесплатно, но за некоторые дополнительные функции (и удаление рекламы) вам придётся заплатить путём приобретения подписки. WPS Office — пакет с множеством различных функций, поддержкой Microsoft Excel и интеграцией со Slack, Zoom и Google Drive.
Большинство жалоб пользователей связано с рекламой в бесплатной версии. Жалобы оправданы, потому что реклама действительно раздражает, но в остальном приложение работает без нареканий, выполняя всё то, что обещано разработчиком.