Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.
Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.
Первый способ адаптации| Услуга Описание Цена Скидка Мобильная верстка Верстка под телефоны $3000 50% Посадка на CMS WordPress $3000 30% |
| Мобильная верстка | Верстка под телефоны | $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
мы присоединяем к левому краю наши дата-атрибуты. Выходит так:
Вот еще пен:
Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
В Аспро: Next, начиная с версии 1.1.7, вы можете адаптировать таблицы для мобильной версии. Необходимо внести изменения в исходный код страницы - добавить класс, который отвечает за адаптивность таблиц.
Простая таблица в мобильной версии выходит за рамки страницы.
Чтобы таблица была адаптивной, перейдите в редактирование страницы, где добавлена таблица. Затем перейдите в режим редактирования исходного кода.
Перед открывающимся тегом
Сохраните изменения.
Теперь таблица прокручивается и не заходит за рамки.
При горизонтальной прокрутке таблица не заходит за рамки, но при прокрутке вправо в мобильной версии открывается боковое меню. Чтобы меню не мешало работе с таблицей, необходимо внести изменения в код страницы.
Необходимо добавить класс «swipeignore» в тег , который мы добавили ранее. В результате перед тегом
Сохраните изменения.
Теперь при прокрутке таблицы вправо не открывается боковое меню, которое мешало работе с таблицей.
Вы можете убрать вывод бокового меню при прокрутке вправо и на других страницах. Необходимо добавить класс «swipeignore» в тег блока, для которого нужно убрать вывод бокового меню. Если у тега не был прописан класс, он примет вид . Если у тега уже добавлены классы, то пропишите «swipeignore» через пробел, например .
Таблицы данных не очень хорошо справляются с адаптивным дизайном. К сожалению, этот момент есть. Отзывчивый дизайн — это все, что нужно для настройки дизайна для размещения экранов разных размеров. Итак, что происходит, когда экран уже, чем минимальная ширина таблицы данных? Вы можете уменьшить масштаб и увидеть всю таблицу, но размер текста будет слишком мал для чтения. Или вы можете приблизить точку считывания, но для просмотра таблицы потребуются горизонтальная прокрутка по вертикали и (печальная). Таблицы данных могут быть довольно широкими и обязательно такими. Таблицы можно выполнить гибкими по ширине (wight=100%), но содержимое ячеек может стать настолько узким, что его просто невозможно будет увидеть.
Для того, чтобы избежать этого неприятного момента используют адаптивные таблицы. В такой таблице будет отображаться горизонтальная полоса прокрутки, если экран слишком мал, чтобы отображать полный контент.
Как сделать адаптивную таблицу с помощью CSSЧтобы создать отзывчивую таблицу, добавьте элемент контейнера overflow-x:auto
вокруг
Примечание. В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если установлено «overflow:scroll» или авто).
Адаптивные сайты уже давно перестали быть диковинкой и они встречаются всё чаще и чаще. Учитывая последние новости с ранжированием поисковых систем (если кто не знает, в поиске с мобильного устройства приоритет отдается адаптивным сайтам), количество таких сайтов будет расти и дальше. Можно быть противником адаптации под мобильные устройства или же выступать «за», но факт остается фактом: всё чаще клиенты требуют, чтобы их сайт был адаптивным и веб-мастерам приходится это делать. Одной из главных проблем при адаптации сайта под разные разрешения являются таблицы. Особенно, если в них очень много данных. Давайте рассмотрим два способа вёрстки адаптивной таблицы. Для начала посмотрим как выглядит таблица:
Скажем прямо: по-настоящему адаптивной такую таблицу не назовешь. Она хорошо смотрится на мобильном, ничего никуда не выпирает и вёрстка сайта не «течёт». Такой способ хорошо подходит, если на вашем сайте таблицы встречаются редко и нет смысла подключать какой-то плагин и писать дополнительные стили из-за них. Такой способ используется Bootstrap-ом. Итак, как это реализуется? Всё просто: таблица обёрнута в div, которому задана максимальная ширина в 100% и overflow: auto.
Если таблица длинная, также можно задать максимальную высоту и зафиксировать шапку таблицы. Результат, как и следующий пример, можно посмотреть на этой странице
. Если же у вас на сайте частенько встречаются таблицы, имеет смысл воспользоваться плагином Footable. Для начала нужно подключить плагин (скачать на GitHub или подключить с CDN), а также инициализировать его:
$(function() {
$(".table").footable({});
});
Здесь нужно кое-что прояснить: скрипт почему-то считает не ширину viewport-а, а ширину таблицы. Чтобы это исправить, нужно чуть «модернизировать» скрипт: JQuery(function () {
jQuery(".table").footable({
calculateWidthOverride: function() {
return {width: jQuery(window).width()};
}
});
})
В инициализации указываем класс таблицы или просто тег table, если хотим, чтобы все таблицы на сайте были адаптивными.
Что всё это значит? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI» и «Аккумулятор». При уменьшении до телефонов, к ним присоединится и колонка «Цена». Контрольные точки можно указать в инициализации: JQuery(function () {
jQuery(".table").footable({
calculateWidthOverride: function() {
return {width: jQuery(window).width()};
},
breakpoints: {
mobile: 0,
tablet: 720,
desktop: 1024
}
});
})
Это значит что в промежутке 0-720 действует правило для mobile, 720-1024 - tablet, а выше 1024 - desktop. Ничто не мешает создать вам ещё больше правил, если это требуется. Также можно сделать, чтобы какая-то колонка была раскрыта по-умолчанию. Для этого указываем data-атрибут data-expanded=«true»
На этом возможности плагина не заканчиваются, но для создания адаптивных таблиц этого вполне достаточно. Остальные возможности рассмотрим в следующий раз. 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 таблица содержит слишком много данных, она становится шире, чем доступное пространство на странице и начинает за него выходить. Чтобы исправить ситуацию, можно добавить таблице горизонтальную прокрутку. Пример: HTML / XHTML. Код: 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 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%
. Пример: 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. Код:
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
:
...
Bootstrap-способ вёрстки адаптивной таблицы
Модель телефона
Цена
RAM, Гб
Диагональ, дюймов
PPI
Аккумулятор, мА·ч
OnePlus One
100500 руб
3
5.5
401
3100
OnePlus Two
100500 руб
4
5.5
401
3300
OnePlus X
100500 руб
3
5
441
2525
...
Модель телефона
Цена
RAM, Гб
Диагональ, дюймов
PPI
Аккумулятор, мА·ч
...
...
...
OnePlus One
100500 руб
3
5.5
401
3100
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
1
2
3
Table_data_1
Table_data_2
Table_data_3
CSS. Код:
.example {position: relative; left: 0px; top: 0px; height: 90px; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.example img {position: absolute; left: 0px; right: 0px; margin: 0px auto; width: 68px;}
В примере по центру выравнивается абсолютно позиционированный элемент img, но вообще данный способ горизонтального выравнивания по центру работает и с другими как строчными, так и блочными абсолютно позиционированными элементами.
Ширина абсолютно позиционированного элемента так же может быть в процентах или в других единицах измерения.
CSS свойства контейнера (в примере.example), внутри которого находится выравниваемый по центру элемент, могут быть самые разные, выравнивание по центру создается с помощью стилей, непосредственно относящихся к элементу: .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto;}.
[ 1 ]
А так же в Netscape 8.01+, Mozilla 1.5+.
[ 2 ]
А так же в Netscape 8.01+, Mozilla 1.5+.
