Адаптивные таблицы на чистом css. Поворачивать телефон — это крайняя мера
Windows : Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .
Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [ 2 ] .
Если HTML таблица содержит слишком много данных, она становится шире, чем доступное пространство на странице и начинает за него выходить. Чтобы исправить ситуацию, можно добавить таблице горизонтальную прокрутку. Пример:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
|---|---|---|---|---|---|---|---|---|---|
| Table_data_1 | Table_data_2 | Table_data_3 | Table_data_4 | Table_data_5 | Table_data_6 | Table_data_7 | Table_data_8 | Table_data_9 | Table_data_10 |
HTML / XHTML. Код:
<table >
<tr >
<th >1</th >
<th >2</th >
<th >3</th >
<th >4</th >
<th >5</th >
<th >6</th >
<th >7</th >
<th >8</th >
<th >9</th >
<th >10</th >
</tr >
<tr >
<td >Table_data_1</td >
<td >Table_data_2</td >
<td >Table_data_3</td >
<td >Table_data_4</td >
<td >Table_data_5</td >
<td >Table_data_6</td >
<td >Table_data_7</td >
<td >Table_data_8</td >
<td >Table_data_9</td >
<td >Table_data_10</td >
</tr >
</ table >
table {display: block; overflow-x: auto;}
/* Дополнительные CSS, просто для приведения примера к некоему внешнему виду: */
table {border-collapse: collapse;}
table td,th {padding: 10px; border: 1px #000 solid;}
Примечание : CSS свойство display: block делает так, что таблица занимает по ширине только столько пространства, сколько ей нужно, чтобы вместить данные без визуальных искажений. Не больше, не растягиваясь по всей ширине доступного пространства на странице. Даже если в CSS код добавлен width: 100% . Пример:
| 1 | 2 | 3 |
|---|---|---|
| Table_data_1 | Table_data_2 | Table_data_3 |
Aliosque subditos et thema
Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS. Пример: HTML / XHTML. Код:
В CSS нет свойства "float: bottom", однако эффекта можно добиться и некоторыми другими способами. Пример: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Код:
Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.
Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.
Первый способ адаптации
| <div class = "table-wrap" > <table > <thead > <tr > <th > Услуга</ th > <th > Описание</ th > <th > Цена</ th > <th > Скидка</ th > </ tr > </ thead > <tbody > <tr > <td > Мобильная верстка</ td > <td > Верстка под телефоны</ td > <td > $3000</ td > <td > 50%</ td > </ tr > <tr > <td > Посадка на CMS WordPress</ td > <td > </ td > <td > $3000</ td > <td > 30%</ td > </ tr > </ tbody > </ table > </ div > |
| Услуга | Описание | Цена | Скидка |
|---|---|---|---|
| Мобильная верстка | Верстка под телефоны | $3000 | 50% |
| Посадка на CMS WordPress | Создание сайта с админ. панелью | $3000 | 30% |
Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap ).
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .table-wrap { text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; } .table-wrap { overflow-y: scroll ; } } |
Table-wrap { text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; } @media screen and (max-width: 600px) { .table-wrap { overflow-y: scroll; } }
В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом.
Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.
Второй способ адаптации
Для начала поменяем разметку:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
| Услуга | Описание | Цена | Скидка |
|---|---|---|---|
| Мобильная верстка | Верстка под телефоны | $3000 | 50% |
| Посадка на CMS WordPress | Создание сайта с админ. панелью | $3000 | 30% |
Раздали каждому столбцу атрибут data-label , который нам пригодится в будущем.
Задаем базовые стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | body { text-align : center ; padding-top : 10% ; font-family : sans-serif ; background-image : url ("bg.jpg" ) ; background-size: cover; height : 100vh; color : #fff ; } .table-wrap { text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; } table { border : 1px solid #ccc ; width : 100% ; margin : 0 ; padding : 0 ; border-collapse : collapse ; border-spacing : 0 ; } table tr { border : 1px solid #ddd ; padding : 5px ; } table th, table td { padding : 10px ; text-align : center ; border-right : 1px solid #ddd ; } table th { color : #fff ; background-color : #444 ; text-transform : uppercase ; font-size : 14px ; letter-spacing : 1px ; } |
body { text-align: center; padding-top: 10%; font-family: sans-serif; background-image: url("bg.jpg"); background-size: cover; height: 100vh; color: #fff; } .table-wrap { text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; } table { border: 1px solid #ccc; width: 100%; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; } table tr { border: 1px solid #ddd; padding: 5px; } table th, table td { padding: 10px; text-align: center; border-right: 1px solid #ddd; } table th { color: #fff; background-color: #444; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }
Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело.
Как это исправить? добавляем стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | @media screen and (max-width: 600px) { table { border : 0 ; } table thead { display : none ; } table tr { margin-bottom : 10px ; display : block ; border-bottom : 2px solid #ddd ; } table td { display : block ; text-align : right ; font-size : 13px ; border-bottom : 1px dotted #ccc ; border-right : 1px solid transparent ; } table td:last-child { border-bottom : 0 ; } table td:before { content : attr(data-label) ; float : left ; text-transform : uppercase ; font-weight : bold ; } } |
@media screen and (max-width: 600px) { table { border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; border-right: 1px solid transparent; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } }
Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса :before
мы присоединяем к левому краю наши дата-атрибуты. Выходит так:
Вот еще пен:
Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
Если бы таблицы могли хорошо адаптироваться под разные разрешения экранов, то человечество и по сей день делало бы табличную верстку. Я ещё застал то время и знаю, о чем говорю.
Однако мы живем в другое время, табличная верстка канула в лету, но потребность в использовании классических таблиц на сайтах все равно осталась. Поэтому мы не будем отрицать существование таблиц, а лучше узнаем о самом простом способе, как сделать таблицу адаптивной .
Демонстрация адаптивной таблицы .
HTML разметка
| Имя | Фамилия | Баллы | Баллы | Баллы | Баллы | Баллы | Баллы | Баллы | Баллы | Баллы | Баллы |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Юлия | Смирнова | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Эвелин | Яковлева | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Андрей | Петров | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Мы создали простенькую HTML таблицу, пока она помещается на экране, все OK. При уменьшении ширины экрана, таблица будет срезаться и мы не увидим её данных или она станет очень мелкой и мы опять ничего не увидим.
Вы наверное заметили, что я поместил таблицу внутри тега div и очевидно не просто так. Сам по себе тег div ничего не даёт, пока мы не пропишем ему стили.
CSS стили
Задав всего одно свойство, таблица адаптируется , автоматически появится горизонтальная полоса прокрутки, когда содержимое внутри тега div перестанет влезать в текущую ширину экрана по оси X .
Div (
overflow-x: auto;
)
Стилизуем остальные теги таблицы:
Table {
border-collapse: collapse; /* Отображать только одинарные линии */
border-spacing: 0; /* Расстояние между ячейками */
width: 100%;
border: 1px solid #afb42b;
color: #212121;
}
Th, td {
text-align: left;
padding: 8px;
}
Стилизация тега tr (ряд) заслуживает отдельного комментария. Уже стало нормой, когда табличные ряды имеют полосатый вид (зебра). Для этого используется псевдокласс :nth-child со значение в скобочках even . Значение even , всем четным элементам присваивает свойства, в нашем случае – это цвет фона. Таким образом, таблица будет полосатой.
Отобразить объемные данные на маленьком экране — всегда та еще головоломка. Какими способами можно ее решить и как должна выглядеть удобная таблица на мобильном?
Стоит отметить, что таблицы часто вылазят за границы экрана не только на мобильных устройствах: случается, что они содержат больше колонок или строк, чем помещается на огромном мониторе или даже нескольких. Однако, чем меньше экран, тем вероятнее, что возникнут проблемы юзабилити.
Ключевые элементы в представлении таблиц — это связность контента и значимые атрибуты. И то, и другое особенно важно для мобильных таблиц. Сначала вы должны создать удобную таблицу для больших мониторов, а потом уже ее версию для маленьких экранов. Такая необходимость может стать отличным поводом, чтобы доработать контент своей таблицы и сделать ее удобнее для всех пользователей.
Количество столбцов таблицы для отображения на экране мобильного зависит от их ширины, причем их содержание должно быть понятно без необходимости использовать зум.
Для сложных или объемных текстов, например, в сравнительных таблицах, на узком мобильном экране поместится только 2 колонки. А если таблица заполнена в основном цифрами, столбцы можно сделать уже и, следовательно, уместить больше.
Статистика Национальной регбийной лиги состоит из цифр, поэтому на экране мобильного спокойно помещается 11 столбцов без необходимости горизонтального скроллинга. Обратите внимание, что такой результат достигается благодаря использованию только логотипа команды-соперника в первой колонке и аббревиатур, которые могут быть непонятны непосвященному человеку. Однако такой детальной статистикой по игрокам и интересуются только фанаты регби.
Поворачивать телефон — это крайняя мера
Если повернуть телефон горизонтально, на экране поместится больше столбцов. Однако в то же время сокращается количество строк, а пользователей может раздражать необходимость поворачивать смартфон (особенно если на нем стоит блокировка поворота). Хорошо подумайте, оправдывает ли эти недостатки большая ширина таблицы.
Чтобы сравнить кредитные карты на сайте Citi, пользователям нужно следовать инструкции: «Поверните свой телефон горизонтально, чтобы продолжить сравнение кредитных карт». При этом при повороте большую часть экрана занимают громадные изображения кредитных карт, которые фиксируются на месте при скроллинге, оставляя совсем мало места для самого содержимого таблицы. Это ошибка многих мобильных сайтов: если на десктопе картинки могут быть хорошим заголовком для столбца, то на мобильном их нужно .
В любой таблице, которая занимает больше одного вертикального экрана, «липкие» заголовки столбцов помогают пользователю не путаться в контексте.
В сравнительной таблице с Best.Buy слева не зафиксированы ни колонки, ни их заголовки, и данные сложно читать. Справа показано то, как выглядит эта таблица при скроллинге, безо всяких видимых пояснений.
Хотя в целом нежелательна как на мобильных, так и на десктопах, она относительно приемлема для больших таблиц на мобильных устройствах. Когда данные не помещаются на экране, посетителям, возможно, придется использовать ее. Однако в таком случае необходимо : должно быть очевидно, что это еще не все доступные данные. Как и в случае слайдеров, стрелки и обрезанные элементы передают эту информацию наиболее доходчиво. Иногда используются точки, но их обычно сложнее заметить и понять.
На сайте eBag последняя колонка с товарами обрезана, и пользователи понимают, что доступна горизонтальная прокрутка.
Сайт Subaru использует точки и стрелки над таблицей, показывая пользователям, что доступно еще несколько экранов с контентом. Точки создают некоторую путаницу, потому что две из них выделены, чтобы показать «текущее местоположение» (то есть две видимые сейчас колонки). К тому же, стрелки лучше разместить не над таблицей, а прямо в ней.
Если пользователям придется прибегнуть к горизонтальной прокрутке, то крайняя левая колонка, которая обычно содержит заголовки строк, должна быть зафиксирована, чтобы пользователи всегда видели заголовки строк.
Fidelity закрепили названия вложений и заголовки столбцов. Последняя колонка справа обрезана, чтобы пользователи понимали, что доступна горизонтальная прокрутка.
Officeworks.com.au зафиксировали первый столбец с товаром, так что пользователи могут сравнивать с ним все остальные варианты. Товар в первом столбце служит точкой отсчета при сравнении, и пользователи могут заменить его каким-нибудь другим. Стрелки, размещенные прямо в таблице, дают понять, что данные можно прокручивать влево и вправо.
Если данные не помещаются на экране, у пользователей наверняка не будет времени или желания изучать их полностью. Поэтому вопрос в том, как предоставить им только ту информацию, которая им необходима. Ответ на этот вопрос зависит от задачи и типа данных. Вот две стратегии по ограничению объема данных в разных ситуациях:
- Пользователь выбирает интересующие его данные до того, как увидит их.
- Пользователь выбирает интересующие его данные в процессе их просмотра.
Первый подход работает, когда пользователю нужно увидеть данные, но не сравнить их, и он выбирает только то, что ему нужно, прежде чем данные загрузятся. Например, его могут интересовать только характеристики конкретного автомобиля, питательные свойства конкретного блюда или статистика для одного конкретного игрока, и пользователь не сравнивает их с другими вариантами.
Чтобы увидеть информацию о питательных свойствах Jamba Juice, посетителю нужно выбрать интересующий его напиток, чтобы увидеть информацию о нем. Переключатель «Маленький/Средний/Большой» позволяет выбрать нужный вариант, но не позволяет их сравнивать. Чтобы понять, например, разницу в количестве калорий между маленьким и средним стаканом, пользователь должен сначала запомнить количество калорий для маленького, потом переключиться на средний, посмотреть количество калорий для него и самостоятельно вычесть одно из другого — куча умственной работы, которую большинство людей поленится делать.
Вторая стратегия — передать пользователю управление обзором в процессе просмотра данных. Например, один пользователь хочет увидеть сходства или различия между двумя вариантами, а другому нужно узнать конкретные характеристики товаров — например, вместительность багажника или меры безопасности, но разница в уровне шума двух автомобилей его не интересует. Возможность выбрать строки и столбцы для отображения позволяет пользователям сконцентрироваться именно на тех характеристиках, которые для них важны.
На сайте Dell пользователи выбирают интересные им технические характеристики продукта в меню вверху страницы. Слева: по умолчанию отображаются все характеристики. В центре: пользователь выбирает нужные. Справа: отображается только то, что он выбрал.
Если таблица включает в себя данные, которые можно сгруппировать по категориям, сделайте это и позвольте мобильным пользователям:
- получить общее представление о типах данных, доступных в таблице;
- получить прямой доступ к интересующей информации.
На Samsung.com в сравнительных таблицах могут отображаться все технические характеристики, или только сходства между продуктами, или только различия, или критерии по выбору пользователя. Сайт группирует данные со сходными атрибутами, позволяя выбирать интересующие наборы данных. В то же время группы данных дают общее представление о содержимом страницы, сообщая пользователям, какая информация о продуктах доступна.
В Аспро: Next, начиная с версии 1.1.7, вы можете адаптировать таблицы для мобильной версии. Необходимо внести изменения в исходный код страницы - добавить класс, который отвечает за адаптивность таблиц.
Простая таблица в мобильной версии выходит за рамки страницы.
Чтобы таблица была адаптивной, перейдите в редактирование страницы, где добавлена таблица. Затем перейдите в режим редактирования исходного кода.
Перед открывающимся тегом
Сохраните изменения.
Теперь таблица прокручивается и не заходит за рамки.
При горизонтальной прокрутке таблица не заходит за рамки, но при прокрутке вправо в мобильной версии открывается боковое меню. Чтобы меню не мешало работе с таблицей, необходимо внести изменения в код страницы.
Необходимо добавить класс «swipeignore» в тег
Сохраните изменения.
Теперь при прокрутке таблицы вправо не открывается боковое меню, которое мешало работе с таблицей.
Вы можете убрать вывод бокового меню при прокрутке вправо и на других страницах. Необходимо добавить класс «swipeignore» в тег