Отзывчивый Столы
Адаптивный дизайн полезно, когда вы хотите, чтобы содержимое вашего веб-страницы, чтобы реагировать на устройство пользователя, например, его размера и ориентации экрана.
С помощью простого имени класса, JQuery Mobile знает доступного размера экрана пользователя и автоматически изменяет размеры себя, чтобы показать содержимое, которое имеет отношение к этому конкретному пользователю.
Отзывчивый таблицы позволяют отобразить большой набор табличных данных, которые будут выглядеть привлекательными как для мобильных и настольных компьютеров.
Есть два типа чувствительных таблиц: оплавления и колонки переключения.
оплавления Таблица
Режим оплавления позиционирует данные таблицы по горизонтали, пока не достигнет минимального размера, то все строки сгруппированы по вертикали.
Создайте таблицу, добавить данные-роль = "таблица" и класс "ui-responsive" на <table> элемента:
Для ответная таблицы для корректной работы, необходимо включить <thead> и <tbody> элементы.
Не используйте RowSpan или Colspan атрибутов; они не поддерживаются в таблицах отзывчивых.
Колонка Переключить Таблица
Режим "колонка переключения" будет скрывать столбцы, когда не хватает ширины для отображения данных.
Чтобы создать таблицу столбец тумблер, добавьте следующие строки в <table> элемента:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >По умолчанию, JQuery Mobile будет скрывать столбцы с правой стороны стола. Тем не менее, вы имеете право указать, какой столбец, который должен быть скрыты или отображены в определенном порядке. Добавьте атрибут данных приоритета для заголовка таблицы (<th>) и указать число в диапазоне от 1 (наивысший приоритет) до 6 (самый низкий приоритет):
<th>I
will never be hidden</th>
<th data-priority="1" >I
am very important - I will probably not be hidden</th>
<th data-priority="3" >I
am less important - I could be hidden</th>
<th
data-priority="5" >I am not that important - there is a good
chance that I will be hidden</th>Если вы не укажете приоритет для столбца, столбец будет стойким и не доступны для сокрытия.
Положите все это вместе, и вы создали таблицу столбец переключения! Обратите внимание на то, что рамки автоматически добавляет кнопку в правом верхнем углу стола. Это позволяет пользователю выбрать , какой столбец для отображения в таблице:
пример
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >
<thead>
<tr>
<th
data-priority="6" >CustomerID</th>
<th>CustomerName</th>
<th data-priority="1" >ContactName</th>
<th data-priority="2" >Address</th>
<th
data-priority="3" >City</th>
<th
data-priority="4" >PostalCode</th>
<th
data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds
Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
Попробуй сам " Чтобы изменить текст кнопки переключения таблицы, используйте атрибут данных столбца БТН-текст:
пример
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Попробуй сам " Стайлинг Столы
Используйте класс "UI-тень", чтобы добавить тени к столу:
Добавить тень
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Попробуй сам " Для получения дополнительной таблицы стиля используйте CSS:
Добавить нижнюю границу для всех строк таблицы
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Попробуй сам " Добавить нижнюю границу для всех <й> элементы и цвет фона для всех четных строк таблицы
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Попробуй сам "