Содержание
Таблица данных является (и может быть всегда) важной частью HTML-документа для визуализации некоторой информации. Для некоторых пользователей важна не только информация в таблице, но и опыт ее чтения.
Если вы уже пытались заставить большие таблицы данных работать с адаптивным дизайном, вы знаете, как это тяжело, поэтому в этой статье вы узнаете, как создать адаптивную таблицу с использованием простого CSS или даже отличной реализации с JS.
Создание адаптивной таблицы с чистым CSS
Чтобы создать таблицу, реагирующую на таблицу, мы сосредоточимся не на самой таблице, а на div, который будет содержать нашу таблицу. В этом случае мы будем использовать медиа-запросы для изменения класса (.table-responsive) в соответствии с размерами экранов. Элемент, который имеет .table-responsive класс должен иметь auto как значение в переполнении по оси х. Используя медиа-запрос, мы применим ширину 100% к div, чтобы сделать его отзывчивым.
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.table-responsive > .table {
margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
}Тогда вам просто нужно обернуть свой стол независимо от размера, в делении с table-responsive Класс, как показано в следующем примере:
#
Field 1
Field 2
Field 3
1
Value 1
Value 2
Value 3
2
Value 1
Value 2
Value 3
3
Value 1
Value 2
Value 3
Тем не менее, обратите внимание, что ширина таблицы (на экранах, где отзывчивый класс не нужен) будет определяться данными таблицы, поэтому, если ваша таблица небольшая, вы можете установить «более отзывчивую» таблицу, установив ширину 100%. с помощью css:
Или создав класс с именем table, чтобы сделать это свойство более очевидным:
/*Or in an external CSS file*/
.table{
width:100%;
}
Создание адаптивной таблицы с CSS и JS
Если вы хотите создать наиболее функциональную адаптивную таблицу, работающую и с Javascript, то у нас есть интересное решение на случай, если вы сможете использовать JS. Мы говорим о отзывчивый-tables.js, эта простая комбинация JS / CSS позволит вашим таблицам адаптироваться к экранам небольших устройств.
Замечания: этот плагин будет полезен, только если первый столбец является ключом таблицы, а не только заголовки, поскольку первый столбец будет всегда отображаться, а другой контент будет прокручиваться на небольших устройствах.
Как это устроено
Если вы проанализируете некоторые таблицы, вы поймете, что большую часть времени, первый столбец является уникальным ключом для таблицы. Это обеспечивает ссылку на другие столбцы, в то время как заголовки столбцов предоставляют легенду о том, что все означает. Имея это в виду, этот плагин позволяет нашим адаптивным таблицам всегда иметь доступ к первому столбцу.
Для начала включите необходимые файлы js и css в ваш документ (посетите домашнюю страницу плагина или же официальный репозиторий в Github):
Затем, в отличие от нашего первого примера только с CSS, чтобы сделать таблицу адаптивной с помощью этого плагина, вам нужно добавить responsive класс к столу:
Инициализация Javascript будет автоматически применена ко всем таблицам с отзывчивым классом, после чего ваши таблицы будут изменены на стороне клиента, когда окно будет меньше, чем у обычного планшета (так что большинство смартфонов или очень маленьких планшетов).
Другие хитрости
Скрыть неактуальную информацию
Если у вас есть таблица с большим количеством данных и вы хотите сделать ее читаемой на устройствах с небольшим экраном, вы можете реализовать множество других решений, например, скрыть некоторые ненужные поля, добавив простой класс, который скрывает поле в низком разрешении устройства, например:
/* This media query will hide the fields in devices with a resolution of 320px*/
@media screen and (max-width: 320px) {
.hide-on-mobile {
display: none;
}
} hide-on-mobile class будет скрывать элемент с указанным классом на устройствах с разрешением экрана ниже 320px, Теперь наша таблица будет выглядеть так:
#
Field 1
Field 2
Field 3
1
Value 1
Value 2
Value 3
2
Value 1
Value 2
Value 3
3
Value 1
Value 2
Value 3
Показывать графики вместо таблиц
Если вам нужен оптимальный пользовательский интерфейс, возможно, вы захотите преобразовать любую таблицу на небольших устройствах в диаграммы. Почти все плагины диаграмм работают на мобильных устройствах и небольших экранах, обеспечивая адаптивную поддержку.
Вы можете использовать известные плагины, такие как HighchartTablePlugin или же Chartinator.
Повеселись !
