Адаптивные таблицы · Bootstrap 3

Адаптивные таблицы Bootstrap 3

Предосталено подробное описание для адаптивных таблиц используемых в плагине bootstrap 3, возможности применения служебных классов и приведены демо примеры.

Примеры применения таблиц bootstrap 3

Для адаптивных таблиц bootstrap 3 созданы свои class="" селекторы, изменяющие их вид и индивидуальные свойства. Манипулируя классами можно установить параметры для каждого индивидуального случая в применении.

Базовый класс таблиц bootstrap 3

Базовым классом таблиц является class="table" создающий отступы и горизонтальные разделители секций.

Имя Пол Возраст
Аня Ж 20
Ваня М 18
Баба люба Ж 75
Дядя Вася М 70

<table class="table">
<thead>
<tr>
<th>Имя</th>
<th>Пол</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Аня</td>
<td>Ж</td>
<td>20</td>
</tr>
<tr>
<td>Ваня</td>
<td>М</td>
<td>18</td>
</tr>
<tr>
<td>Баба люба</td>
<td>Ж</td>
<td>75</td>
</tr>
<tr>
<td>Дядя Вася</td>
<td>М</td>
<td>70</td>
</tr>
</tbody>
</table>

Чередование фона ячеек таблиц

При необходимости можно добавить чередование горизонтальным строкам таблиц добавив к базовому селектору класс class="table table-striped", эффект происходит за счёт использования свойства .table-striped > tbody > tr:nth-child(odd) и устанавливает цвет фона свойством background-color: #f9f9f9; который Вы можете изменить на свой.

Время года Дождь Снег
Зима нет есть
Весна есть есть
Лето есть нет
Осень есть есть

<table class="table table-striped">
<thead>
<tr>
<th>Время года</th>
<th>Дождь</th>
<th>Снег</th>
</tr>
</thead>
<tbody>
<tr>
<td>Зима</td>
<td>нет</td>
<td>есть</td>
</tr>
<tr>
<td>Весна</td>
<td>есть</td>
<td>есть</td>
</tr>
<tr>
<td>Лето</td>
<td>есть</td>
<td>нет</td>
</tr>
<tr>
<td>Осень</td>
<td>есть</td>
<td>есть</td>
</tr>
</tbody>
</table>

Бордюры для строк и ячеек таблиц

Для добавления всем строкам и ячейкам таблиц видимых бордюров, примените к базовому селектору класс class="table table-bordered" добавление прроисходит .table-bordered и используется свойство border: 1px solid #dddddd;.

Бордюр Машина Отношение
10см заезжает хорошее
20см не каждая напряжённое
30см не заезжает негативное

<table class="table table-bordered">
<thead>
<tr>
<th>Бордюр</th>
<th>Машина</th>
<th>Отношение</th>
</tr>
</thead>
<tbody>
<tr>
<td>10см</td>
<td>заезжает</td>
<td>хорошее</td>
</tr>
<tr>
<td>20см</td>
<td>не каждая</td>
<td>напряжённое</td>
</tr>
<tr>
<td>30см</td>
<td>не заезжает</td>
<td>негативное</td>
</tr>
</tbody>
</table>

Выделение строк таблиц при наведении

Вы можете добавить к базовому селектору класс class="table table-hover" чтобы при наведении фон выделялся цветом, используется значение свойства background-color: #f5f5f5;.

День Погода Настроение
31 декабря хорошая хорошее
23 февраля плохая хорошее
8 марта плохая плохое

<table class="table table-hover">
<thead>
<tr>
<th>День</th>
<th>Погода</th>
<th>Настроение</th>
</tr>
</thead>
<tbody>
<tr>
<td>31 декабря</td>
<td>хорошая</td>
<td>хорошее</td>
</tr>
<tr>
<td>23 февраля</td>
<td>плохая</td>
<td>хорошее</td>
</tr>
<tr>
<td>8 марта</td>
<td>плохая</td>
<td>плохое</td>
</tr>
</tbody>
</table>

Уменьшение высоты строкам таблиц

Уменьшить высоту горизонтальным строкам таблиц можно применив к базовому классу селектор class="table table-condensed", уменьшатся отступы с верху и с низу.

Дни после зарплаты Количество денег Настроение
1 день 50% хорошее
5 дней 10% среднее
10 дней 1% плохое
20 дней Долг среднее

<table class="table table-condensed">
<thead>
<tr>
<th>Дни после зарплаты</th>
<th>Количество денег</th>
<th>Настроение</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 день</td>
<td>50%</td>
<td>хорошее</td>
</tr>
<tr>
<td>5 дней</td>
<td>10%</td>
<td>среднее</td>
</tr>
<tr>
<td>10 дней</td>
<td>1%</td>
<td>плохое</td>
</tr>
<tr>
<td>20 дней</td>
<td>Долг</td>
<td>среднее</td>
</tr>
</tbody>
</table>

Адаптивность широких таблиц

При достижении определённой ширины таблиц, невозможно контролировать их адекватный вид, поэтому стоит обернуть таблицу в блок c <div class="table-responsive"> установив таблице свойство смещения по overflow: x;. Добавится ползунок скроллинга смещения по горизонтали, при этом высота таблицы останется прежней.

Обратите внимание!!! Файл стилей должен быть не менее версии v3.3.0, в более ранних версиях был недостаток относящийся к class="table-responsive", при переходе на размер ширины (max-width:767px) таблица теряла скроллинг по оси - x, и содержимое большего размера выходило за пределы адаптивного состояния.

Количество дней в январе
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

<div class="table-responsive">
<table class="table">
<caption>Количество дней в январе</caption>
<tbody>
<tr>
<td>1 </td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>

Контекстные классы для строк и ячеек таблиц

Применяйте контекстные классы для изменения состояния строк и ячеек таблиц, а так же для добавления цвета. Ниже предоставлен пример применения контекстных классов.

Класс Состояние и цвет
class="active" Изменяет активное состояние
class="success" Изменяет цвет строк и ячеек
class="info" Изменяет цвет строк и ячеек
class="warning" Изменяет цвет строк и ячеек
class="danger" Изменяет цвет строк и ячеек

<style>
.active {font-weight:bold;}
</style>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Класс</th>
<th>Состояние и цвет</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>class="active"</td>
<td>Изменяет состояние при наведении</td>
</tr>
<tr class="success">
<td>class="success"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
<tr class="info">
<td>class="info"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
<tr class="warning">
<td>class="warning"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
<tr class="danger">
<td>class="danger"</td>
<td>Изменяет цвет строк и ячеек</td>
</tr>
</tbody>
</table>
</div>

Установка видимости таблиц и их элементов

Вы можете определить при необходимости видимость или скрытость любых элементов таблиц, или полностью таблицу для устройств с разными размерами экранов и дисплеев. Для этого применяйте служебные классы видимости \ скрытости, их значения предоставлены в таблице ниже.

class="" Устройства (<768px) Устройства (≥768px) Устройства (≥992px) Устройства (≥1200px)
.visible-xs Видно Скрыто Скрыто Скрыто
.visible-sm Скрыто Видно Скрыто Скрыто
.visible-md Скрыто Скрыто Видно Скрыто
.visible-lg Скрыто Скрыто Скрыто Видно
.hidden-xs Скрыто Видно Видно Видно
.hidden-sm Видно Скрыто Видно Видно
.hidden-md Видно Видно Скрыто Видно
.hidden-lg Видно Видно Видно Скрыто

Видимость таблиц и их элементов при печати

Дополнительные классы видимости элементов таблиц в браузере и для печатающих устройств.

class="" В браузере При печати
.visible-print Скрыто Видно
.hidden-print Видно Скрыто
Описанные классы для таблиц bootstrap 3 можно использовать в зависимости от требуемых обстоятельств по отдельности, а так же применять по нескольку одновременно.

Рейтинг: 4.5/5 из 19



Добавлено Автор Ник Источник Просмотров Комментариев Теги
21-11-2014 Михаил Меренков aTmpl © 11604 0 адаптивные таблицы, responsive tables, bootstrap 3