Адаптивные сайты уже давно перестали быть диковинкой и они встречаются всё чаще и чаще. Учитывая последние новости с ранжированием поисковых систем (если кто не знает, в поиске с мобильного устройства приоритет отдается адаптивным сайтам), количество таких сайтов будет расти и дальше. Можно быть противником адаптации под мобильные устройства или же выступать «за», но факт остается фактом: всё чаще клиенты требуют, чтобы их сайт был адаптивным и веб-мастерам приходится это делать.
Одной из главных проблем при адаптации сайта под разные разрешения являются таблицы. Особенно, если в них очень много данных. Давайте рассмотрим два способа вёрстки адаптивной таблицы.
Для начала посмотрим как выглядит таблица:
| OnePlus One | 100500 руб | 3 | 5.5 | 401 | 3100 |
| OnePlus Two | 100500 руб | 4 | 5.5 | 401 | 3300 |
| OnePlus X | 100500 руб | 3 | 5 | 441 | 2525 |
Скажем прямо: по-настоящему адаптивной такую таблицу не назовешь. Она хорошо смотрится на мобильном, ничего никуда не выпирает и вёрстка сайта не «течёт». Такой способ хорошо подходит, если на вашем сайте таблицы встречаются редко и нет смысла подключать какой-то плагин и писать дополнительные стили из-за них. Такой способ используется 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»
| OnePlus One | 100500 руб | 3 | 5.5 | 401 | 3100 |
На этом возможности плагина не заканчиваются, но для создания адаптивных таблиц этого вполне достаточно. Остальные возможности рассмотрим в следующий раз.
Таблицы данных не очень хорошо справляются с адаптивным дизайном. К сожалению, этот момент есть. Отзывчивый дизайн — это все, что нужно для настройки дизайна для размещения экранов разных размеров. Итак, что происходит, когда экран уже, чем минимальная ширина таблицы данных? Вы можете уменьшить масштаб и увидеть всю таблицу, но размер текста будет слишком мал для чтения. Или вы можете приблизить точку считывания, но для просмотра таблицы потребуются горизонтальная прокрутка по вертикали и (печальная). Таблицы данных могут быть довольно широкими и обязательно такими. Таблицы можно выполнить гибкими по ширине (wight=100%), но содержимое ячеек может стать настолько узким, что его просто невозможно будет увидеть.
Для того, чтобы избежать этого неприятного момента используют адаптивные таблицы. В такой таблице будет отображаться горизонтальная полоса прокрутки, если экран слишком мал, чтобы отображать полный контент.
Как сделать адаптивную таблицу с помощью CSSЧтобы создать отзывчивую таблицу, добавьте элемент контейнера overflow-x:auto
вокруг
Примечание. В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если установлено «overflow:scroll» или авто).
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 Существует немало онлайн сервисов для создания sitemap.xml. Однако его можно сделать и самому на своем компьютере, используя браузер lynx и несколько утилит командной строки Linux. Далее описывается пример использующего их bash-скрипта, названного "sitemap.sh".
Bash-скрипт, который создает файл sitemap.xml:
#!/bin/bash
cd /home/me/sitemap/www/
lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > /dev/null
cd /home/me/sitemap/www2/
lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null
cat /home/me/sitemap/www2/traverse.dat >> /home/me/sitemap/www/traverse.dat
cat /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | sort | uniq > /home/me/sitemap/sitemap/sitemap.xml
sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml
sed -i "s/"/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml
sed -i "s/"/\"\;/g" /home/me/sitemap/sitemap/sitemap.xml
sed -i "s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml
sed -i "s/
:
...
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
Вам также может понравиться
Чем открыть vcf файл на компьютере
Что такое расширение файла VP6?
Очистка Android-смартфона: программы и советы