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
Существует немало онлайн сервисов для создания 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/\
В 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. Код:
Таблицы данных не очень хорошо справляются с адаптивным дизайном. К сожалению, этот момент есть. Отзывчивый дизайн — это все, что нужно для настройки дизайна для размещения экранов разных размеров. Итак, что происходит, когда экран уже, чем минимальная ширина таблицы данных? Вы можете уменьшить масштаб и увидеть всю таблицу, но размер текста будет слишком мал для чтения. Или вы можете приблизить точку считывания, но для просмотра таблицы потребуются горизонтальная прокрутка по вертикали и (печальная). Таблицы данных могут быть довольно широкими и обязательно такими. Таблицы можно выполнить гибкими по ширине (wight=100%), но содержимое ячеек может стать настолько узким, что его просто невозможно будет увидеть.
Для того, чтобы избежать этого неприятного момента используют адаптивные таблицы. В такой таблице будет отображаться горизонтальная полоса прокрутки, если экран слишком мал, чтобы отображать полный контент.
Как сделать адаптивную таблицу с помощью CSS
Чтобы создать отзывчивую таблицу, добавьте элемент контейнера overflow-x:auto
вокруг Примечание. В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если установлено «overflow:scroll» или авто).
В Аспро: Next, начиная с версии 1.1.7, вы можете адаптировать таблицы для мобильной версии. Необходимо внести изменения в исходный код страницы - добавить класс, который отвечает за адаптивность таблиц. Простая таблица в мобильной версии выходит за рамки страницы. Чтобы таблица была адаптивной, перейдите в редактирование страницы, где добавлена таблица. Затем перейдите в режим редактирования исходного кода. Перед открывающимся тегом После закрывающегося тега Сохраните изменения.
Теперь таблица прокручивается и не заходит за рамки. При горизонтальной прокрутке таблица не заходит за рамки, но при прокрутке вправо в мобильной версии открывается боковое меню. Чтобы меню не мешало работе с таблицей, необходимо внести изменения в код страницы. Необходимо добавить класс «swipeignore» в тег Сохраните изменения. Теперь при прокрутке таблицы вправо не открывается боковое меню, которое мешало работе с таблицей. Вы можете убрать вывод бокового меню при прокрутке вправо и на других страницах. Необходимо добавить класс «swipeignore» в тег Если вы когда-нибудь пробовали создавать сайт, адаптированный под мобильные устройства, или переделывать сайт для настольных компьютеров в адаптивный, то наверно знаете, что одна из самых больших проблем при такой верстке - это корректное отображение таблиц. Обычно таблицы не очень хорошо адаптируются под маленькие экраны, и поэтому, если на Вашем сайте без них никак не обойтись, то нужно найти способ отображать их удобно для пользователя. Создатели сайтов придумали уже не один способ, как это сделать. С помощью CSS и JavaScript можно выстроить ячейки на маленьких экранах в одну колонку, можно скрыть колонки с не очень важными данными, и даже превратить таблицу в круговую диаграмму. Все эти способы уже не раз описаны как на английском, так и на русском языке, и Вы можете без труда прочесть о них в Интернете. Я же в своей статье хотел бы поговорить о том, как выбрать из этих решений то, которое нужно именно Вам и именно для Вашего сайта. Прежде, чем выбрать правильный способ, нужно задать себе несколько вопросов, касающихся контента в таблице. Будут ли люди сравнивать данные в колонках или строках?
Пример 1. Люди не будут сравнивать данные
Сначала рассмотрим пример таблицы, в которой пользователям не обязательно сравнивать данные. Пример такой таблицы - список фильмов . В этой таблице фильмы расположены в соответствии с рейтингом. На большом экране удобно просматривать эти данные в виде таблицы, но вряд ли кому-то жизненно необходимо сравнивать одного режиссера с другим. Поэтому столбцы этой таблицы на маленьких экранах можно смело трансформировать в один. Именно это сделали создатели сайта JQuery Mobile. Пример 2. Люди будут сравнивать данные строк или столбцов
Если у вас в таблице есть, к примеру, список одинаковых данных по разным компаниям, то очевидно, что пользователь будет их сравнивать, чтобы выбрать для себя лучший вариант. Пример такой таблицы мы можем видеть на картинке. Рис. 3. Таблица с данными, которые подлежат сравнению В этом случае нам нужно решение, которое позволит пользователю сравнивать ряды. Один из вариантов, представленный - это когда на маленьких экранах таблица переворачивается таким образом, что данные вместо горизонтального положения перестраиваются в вертикальное. Таким образом, верхний ряд - заголовки таблицы - теперь стал крайней левой колонкой, а колонки с данными, если они нужны, пользователь может прокручивать по горизонтали. Рис. 4. Таблица с данными на экране мобильного телефона Еще один вариант - это оставить пользователю возможность выбирать, какие столбцы отображать, а какие нет. Это реализовано . На узких экранах столбцы с не очень важными данными скрываются, но если кто-то хочет их посмотреть, он может включить эти столбцы. Рис. 5. Таблица с данными в полной версии сайта Рис. 6 и 7. Та же таблица в мобильной версии. Остались только самые важные столбцы, но при необходимости можно включить все остальные. Какая информация - важная?
Если вы решили скрыть на маленьких экранах часть информации, то естественно возникает вопрос: какая же информация - важная? В такой ситуации бывает полезно задать себе следующие вопросы: Смогут ли пользователи отличить одну часть таблицы от другой?
Когда пользователь просматривает таблицу, ряд за рядом, в поисках нужной информации, как он может быстро отличить один ряд от другого? Это особенно важно, когда таблицы используются в интерфейсе веб-приложений. В полной версии сайта мы можем поместить в таблицу все, что угодно. Но для мобильной версии необходимо оставить самую необходимую информацию, и быть уверенным, что пользователь не спутает одни данные с другими. Должно ли все быть на экране одновременно, или можно добавить дополнительные элементы в случае необходимости?
Сложнее всего обычно бывает создать адаптивные таблицы, когда разработчик сайта пытается поместить все то, что есть на большом экране, на маленький. В самых сложных случаях это вызывает большие проблемы с отображением таблиц. Многие люди ошибаются, если думают, что адаптивный дизайн означает показывать все, что есть на странице, вне зависимости от размеров экрана. На самом деле лучше поместить на узкий экран только самое важное, а остальное добавлять уже по мере увеличения. Интересно, что чаще всего когда мы начинаем дизайн с полноэкранной версии и видим огромную таблицу с большим количеством контента, то нам трудно допустить, что на узком экране она потеряет часть этого контента. Но когда мы действуем по принципу «сначала мобильные», то таких проблем не возникает. Итак, что имеет значение, когда речь идет о таблицах в адаптивном дизайне?
Если Вы можете ответить «да» на все три вопроса, значит, на Вашем сайте нет проблем с таблицами. Ваш контент подскажет, что лучше всего делать с таблицами.
Есть множество различных способов разместить таблицы в адаптивном дизайне. Со временем их станет еще больше. Но каким образом выбрать правильный способ? Ответ может быть только один. Ваш контент подскажет, что лучше всего делать с таблицами. Ваша задача - правильно проанализировать его. Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары. Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас. Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap
). 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-label
, который нам пригодится в будущем. Задаем базовые стили: 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 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили: @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
мы присоединяем к левому краю наши дата-атрибуты. Выходит так: Вот еще пен: Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!
:
...
добавьте тег с классом
пропишите тег .
...
должен быть прописан тег с классами
...
Первый способ адаптации
<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%
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
;
}
}
Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании 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%
Услуга
Описание
Цена
Скидка
Мобильная верстка
Верстка под телефоны
$3000
50%
Посадка на CMS WordPress
Создание сайта с админ. панелью
$3000
30%
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
;
}
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
;
}
}
