Bootstrap таблица адаптивная: Таблицы · Bootstrap на русском

Таблицы · Bootstrap на русском

Из-за повсеместного использования таблицы через сторонние виджеты календарями и датами, мы разработали таблицы Для быть отказ в. Просто добавьте базовый класс .table любой <table>, расширить пользовательские стили или различных классов включен модификатор.

Содержание

Примеры

Используя самые элементарные таблица наценки, вот как .table на основе таблицы смотри на Bootstrap.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы также можете инвертировать цвета—со светлым текстом на темном фоне—с . table-inverse.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица параметры заголовка

Аналогично по умолчанию и обратные таблицы, использовать один из двух классов модификатор, чтобы сделать <thead> появляются светло-или темно-серый.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

«Зебра»

Используйте .table-striped для добавления зебра-чередование любого таблица подряд в <tbody>.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Рамочная таблица

Добавить .table-bordered для границ со всех сторон таблица и клеток.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Наведение строк

Добавить .table-hover для включения наведение состояние О таблица строк в <tbody>.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Небольшая таблица

Добавьте класс .table-sm, чтобы сделать таблицу более компактной, уменьшив наполовину внутренний отступ в ячейках.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстные классы

Использовать контекстные классы для стиля строк таблицы или отдельных ячеек.

<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

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

<!-- В строках -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

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

Сделать таблицу адаптивной можно просто с помощью добавления класса .table-responsive к .table, благодаря этому у Вас появятся полосы прокрутки таблицы на устройствах с малыми дисплеями (менее 768px). При просмотре таблицы на устройстве с шириной экрана более чем 768px Вы даже не заметите разницы.

Вертикальной подрезки/усечения

Адаптивный таблицы использовать overflow-y: hidden, который загибается любое содержание, которое выходит за пределы нижней или верхней кромками таблица. В частности, это может клип выпадающие меню и другие сторонние виджеты.

Firefox и fieldsets

Firefox имеет какой-то несуразный набор полей для укладки участием width что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Для получения дополнительной информации, прочитайте этот ответ на Stack Overflow.

<div>
  <table>
    ...
  </table>
</div>

Обратный стиль

Превратите традиционную таблицу на их стороне с помощью table-reflow. При использовании обратного стиля, заголовок таблицы будет в первом столбце, первая строка таблицы становится второй колонкой, вторая строка становится третьей колонкой, и т. д.

Содержание заказа и сложных таблицы

Помните, что table-reflow изменения стиля визуальный порядок содержания. Убедитесь, что вы только применить этот стиль к хорошо сформированные и простые данные таблицы (и в частности, не использовать это для разметка таблицы) с соответствующими <th> таблица заголовков ячеек для каждой строки и столбца.

Кроме того, этот класс не будет работать за таблицы клеток, которые охватывают несколько строк или столбцов (с помощью rowspan или colspan атрибуты).

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Адаптивная таблица bootstrap – в примерах и подробностях для новичков

Приветствую вас, дорогие подписчики и конечно же гости моего блога. Эту статью я писал специально для того, чтобы посвятить вас во все подробности работы с таким элементом, как адаптивная таблица Bootstrap. Это очень полезный и многофункциональный инструмент, который значительно упрощает верстку.

Я расскажу вам обо всех важных встроенных классах, подробно объясню, как они функционируют и конечно же приведу множество примеров. Приступим же!

Шаг 1. Просто создать таблицу

Итак, чтобы создать самое примитивное табличное представление в фреймворке Bootstrap 3, для начала вам нужно прописать разметку на html. Выглядит это вот так:

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

<table>
    <thead>
      <tr>
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>

<table> <thead> <tr> <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table>

Если вы запустите код, то никакого стилевого оформления не увидите. А теперь используйте класс фреймворка для тега <table>:

<table>

Таблица так и осталась без границ по периметру, однако ее поля разделены горизонтальной линией, и она растянулась на всю ширину экрана.

Шаг 2. Сделать ее полосатой

Теперь чтобы создать полосатую таблицу необходимо только добавить определенный класс в код. И таковым является .table-striped. Строка будет выглядеть следующим образом:

<table> …</table>

По умолчанию полоса серого цвета чередуется с белой. Однако вы всегда можете залезть в css файл и там поменять значения стилевых свойств или же переопределить их через файл style.css.

Шаг 3. Ограничить ее!

Если же вам не нравятся таблицы без рамочки, то это можно исправить применением класса .table-bordered. Для примера я несколько подкорректировал стилевую разметку, добавив тени вокруг объекта.

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

<head>
…
<style> 
.container { 
margin: 9px;
}
.table-bordered {
box-shadow: 1px 2px 7px #191970;
}
</style>
</head>
<body>
 
<div>
   <table>
    <thead>
      <tr>
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>
</div>

<head> … <style> .container { margin: 9px; } .table-bordered { box-shadow: 1px 2px 7px #191970; } </style> </head> <body> <div> <table> <thead> <tr> <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table> </div>

Шаг 4. А я хочу вот эту строку!

Создатели Bootstrap предусмотрели такой класс, как .table-hover специально для тех разработчиков, которые хотят добавить выделение строк при наведении на них курсора. В этом случае в примере вам, дорогие читатели, стоит заменить .table- striped на обсуждаемый класс.

Шаг 5. Подчеркнуть цветом ее содержание

Если же в таблице вам необходимо выделить какие-то строки или ячейки в зависимости от их контекста, то можно обратиться за помощью к контекстуальным (Contextual) классам. Всего их 5 штук.

Так, в нашем примере перечисленные Contextual Classes можно применить, чтобы выделить какие товары есть на складе, а какие не завезли.

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

<div>
   <table>
    <thead>
      <tr >
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>
</div>

<div> <table> <thead> <tr > <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table> </div>

Шаг 6. Компактнее, друзья, компактнее!

Чтобы уменьшить расстояние между строками был создан такой механизм, как .table-condensed. Он урезает внутренние отступы (padding) в половину. Добавьте его в уже известное вам место в программной реализации и проанализируйте результаты. Я же далее в своей программе этот прием использовать не буду.

Шаг 7. Сделать ее отзывчивой

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

За все названные действия отвечает .table-responsive. Его нужно добавить в блок, охватывающий всю табличную реализацию.

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

<div>
  <div>
   <table>
    <thead>
      <tr >
        <th>Название конфет</th>
        <th>Тип</th>
        <th>Стоимость</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>"Ромашка"</td>
        <td>Шоколадные</td>
        <td>110.50</td>
      </tr>
      <tr>
        <td>"Шипучка"</td>
        <td>Леденец</td>
        <td>97.90</td>
      </tr>
      <tr>
        <td>"Мармеладные мишки"</td>
        <td>Желатиновые</td>
        <td>250.00</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

<div> <div> <table> <thead> <tr > <th>Название конфет</th> <th>Тип</th> <th>Стоимость</th> </tr> </thead> <tbody> <tr> <td>»Ромашка»</td> <td>Шоколадные</td> <td>110.50</td> </tr> <tr> <td>»Шипучка»</td> <td>Леденец</td> <td>97.90</td> </tr> <tr> <td>»Мармеладные мишки»</td> <td>Желатиновые</td> <td>250.00</td> </tr> </tbody> </table> </div> </div>

Вот и все! Очень надеюсь, что вам понравилась моя статья. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на понравившиеся публикации с друзьями. До встречи! Пока-пока!

С уважением, Роман Чуешов

Прочитано: 993 раз

Таблицы. Содержание · Bootstrap. Версия v4.0.0

Документация и примеры стилизации таблиц с элементами ввода (с учетом их широкого применения в плагинах JavaScript).

Примеры

Из-за широкого распространения таблиц в сторонних виджетах, таких как календари и «напоминалки», мы сделали так, что таблицы подключаются по согласию пользователя. Просто добавьте базовый класс .table в любой <table>, затем расширьте стилизацию за счет наших обычных классов, либо классов-модификаторов.

Вот так таблицы, основанные на классе .table, выглядят в базовой разметке таблиц в Bootstrap. Все стили таблиц в BS4 наследуются, что означает, что вложенные таблицы будут стилизованы как родительские.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы можете инвертировать цвета со светлых на темные классом .table-dark.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Опции заголовка таблицы

По тому же принципу осветляйте или делайте серым заголовок таблицы <thead> с помощью классов .thead-light и .thead-dark.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Разделенные «полосами» ряды

Добавьте класс .table-striped к <tbody> для разделения «полосками зебры» рядов таблицы.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица с границами

Добавьте класс .table-bordered в <table> для создания границ ячеек и таблицы со всех сторон.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Ряды с :hover

Добавьте класс .table-hover в <tbody> для активации :hover у рядов таблицы.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Маленькие таблицы

Добавьте класс .table-sm чтобы сделать таблицы компактнее урезанием паддинга ячкейки на 50%.

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстуальные классы

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

<!-- On rows -->
<tr>...</tr>

<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td>...</td>
  
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

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

<!-- On rows -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Добавление информативности для технологии для инвалидов

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей ассистивных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Создавайте гибкие таблицы, обертывая любой .table с .table-responsive{-sm|-md|-lg|-xl}, заставляя таблицу прокручиваться горизонтально в каждой контрольной точке max-width получат ширину 575.99px, 767.99px, 991.99px и 1119.99 px, соответственно.

Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения минимальных min- и максимальных max- префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.

Надписи

Тэг <caption> — это нечто похожее на заголовок для таблицы. Он помогает пользователям программ для чтения с экрана обнаружить таблицу, оценить ее содержимое и ее ценность для чтения.

<table>
  <caption>Список пользователей</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

«Отзывчивые» таблицы

«Отзывчивые» таблицы позволяют таблицам прокручиваться горизонтально. Сделайте любую таблицу таковой для всех экранов и девайсов, добавив класс .table-responsive в класс .table. Или укажите максимальный брейкпойнт, на котором появится данное свойство таблицы, добавив класс .table-responsive{-sm|-md|-lg|-xl}.

Вертикальное обрезание/сокращение

«Отзывчивые» таблицы используют overflow-y: hidden, что «обрезает» любой контент, который существует ниже конца верхних краев таблицы. В частности, это может «срезать» выпадающие меню и другие сторонние виджеты.

Всегда «отзывчиво»

Через каждую контрольную точку используйте .table-responsive для горизонтально прокручиваемых таблиц.

<div>
  <table>
    ...
  </table>
</div>

Специфика брейкпойнтов

Используйте класс .table-responsive{-sm|-md|-lg|-xl} когда необходимо создать отзывчивые до необходимого брейкпойнта таблицы. От него и выше таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.

<div>
  <table>
    ...
  </table>
</div>

<div>
  <table>
    ...
  </table>
</div>

<div>
  <table>
    ...
  </table>
</div>

<div>
  <table>
    ...
  </table>
</div>

Таблицы в Bootstrap 4 | WebReference

Bootstrap 4 добавил несколько новых классов таблиц, которые помогают создавать единообразно оформленные и адаптивные таблицы.

Базовая таблица

Для базовой таблицы, с небольшим padding у ячеек и горизонтальными разделителями, примените класс .table к элементу <table>.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Тёмная таблица

Вы можете использовать класс .table-dark для инвертирования цветов, чтобы на тёмном фоне был светлый текст.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Новое в Bootstrap 4

Тёмные таблицы являются новыми в Bootstrap 4.

Полосатая таблица

Для чередования фоновых цветов в строках добавьте класс .table-striped (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Таблица с обрамлением

Для границ по всей таблице используйте класс .table-borded (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Подсветка строк

Чтобы добиться эффекта «подсветки», когда курсор наводится на строки таблицы, используйте класс .table-hover (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Стили заголовка таблицы

Вы можете добавить фоновый цвет к элементу <thead> с помощью .thead-default или .thead-inverse.

Светлый

Используйте класс .thead-light.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Тёмный

Используйте класс .thead-dark.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Новое в Bootstrap 4

Стили заголовка таблицы являются новыми в Bootstrap 4.

Маленькие/сжатые таблицы

Если вы считаете, что в таблице слишком много отступов, то можете убрать их наполовину через класс .table-sm (оставляя при этом класс .table на месте).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table> <thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Подвал 1</th>
<th>Подвал 2</th>
<th>Подвал 3</th>
</tr>
</tfoot>
<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>
</tbody>
</table>

Bootstrap 4 против Bootstrap 3

Обратите внимание, что Bootstrap 4 использует .table-sm для сжатия таблицы, а Bootstrap 3 использует .table-condensed. Оба уменьшают padding для ячеек вполовину.

Контекстные классы

Вы можете применить цвет к отдельным строкам или ячейкам с помощью пяти контекстных классов Bootstrap: .table-active, .table-success, .table-info, .table-warning и .table-danger.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Активный</td>
<td>Успех</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Информация</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Опасность</td>
<td>&nbsp;</td>
<td>Предупреждение</td>
</tr>
</tbody>
</table>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 не задействует префикс .table- для своих контекстных классов. К примеру, Bootstrap 3 использует .active, тогда как Bootstrap 4 .table-active. Кроме этого, обе версии используют одни и те же пять контекстных ключевых слов (active, success, info, warning, danger).

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

Адаптивные таблицы автоматически создают горизонтальную полосу прокрутки при просмотре на устройствах меньше заданной точки останова. Чтобы создать адаптивную таблицу, заключите таблицу в элемент <div> с классом .table-responsive (или один из классов .table-responseive-*).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<div>
<table>
<thead>
<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>
</thead>
<tbody>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>
</div>

Классы .table-responseive-* могут использоваться для указания конкретной точки останова. Это .table-response-sm, .table-response-md, .table-responseive-lg и .table-responseive-xl. С указанной точки останова и выше таблица будет вести себя обычно, а не прокручиваться горизонтально.

Класс .table-responseive эквивалентен .table-responseive-md.

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Фреймворк Bootstrap: как делать адаптивные таблицы?

От автора: я приветствую вас. В прошлых статьях мы рассматривали, как с помощью фреймворка сделать горизонтальное и вертикальное меню. Сегодняшняя же статья будет посвящена тому, как делать с помощью bootstrap таблицы.

Про таблицы в bootstrap говорить особо нечего. Тут есть пару классов для оформления, а также возможность сделать таблицу полностью адаптивной. Сейчас все это рассмотрим. Делайте такую же таблицу, какую делаете обычно: с помощью тегов table, tr и td. Например:

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>

</table>

По умолчанию без стилей бутстрап выглядит она совсем бедно:

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Но стоит только добавить тегу table класс table (банально, не так ли?) и все становится на свои места:

Дело в том, что если таблицу просто вставить в body, то она будет растянута на весь экран, даже если в ней всего 1 ячейка, поэтому вставляйте таблицу непосредственно в какой-то блок, который имеет ограничения по ширине.

С помощью дополнительного класса table-striped вы можете сделать так, чтобы ряды таблицы окрашивались поочередно в 2 разных цвета:

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Собственно, если вы хотите, чтобы ячейки имели границы со всех сторон, а не только сверху, добавьте таблице класс table-bordered. Так она будет выглядеть по-стандартному:

Вот и все, что есть в Bootstrap для таблиц. Очень мало, не так ли? Все остальное вы можете стилизовать сами, а фреймворк свою основную задачу выполняет – придает таблицам нормальный вид. А оформление в данном случае полностью на вас.

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

Вижу, что многих из вас беспокоят вопросы, связанные с тем, как сделать в bootstrap адаптивную таблицу и как вообще управлять ее шириной. Как я уже сказал, никакой шириной управлять не нужно, да и никакую адаптивность тоже не стоит реализовывать. Все очень просто, вам достаточно обернуть таблицу в div с классом table-responsive:

<div class = «table-responsive»>
<table class = «table table-bordered»>
…
</table>
</div>

Таблица по умолчанию будет сжиматься до тех пор, пока это возможно. Если же содержимое ячеек просто перестанет помещаться на странице, образуется горизонтальная прокрутка. Чтобы убрать ее, как раз и используют класс table-responsive, но он задается не таблице, а блоку, который выступает для нее контейнером.

Что делает этот класс? Во-первых, при нем не будет происходить съезжание текста в ячейках. Во-вторых, даже если сама таблица не поместится по ширине, появится горизонтальная прокрутка, но не для окна в целом, а только в пределах самой таблицы.

Окрашивание рядов и ячеек

Используйте классы active, success, info, warning и danger для применения фонового цвета к целым рядам или отдельным ячейкам. Пример:

<table class = «table»>
<tr class = «info»>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr class = «success»>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr class = «danger»>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
</table>

В общем, мы рассмотрели общие моменты работы с таблицами, которые есть в Bootstrap по умолчанию. Как видите, ничего сложного нет.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!

Смотреть

css — Адаптивные таблицы Bootstrap 4 не будут занимать 100% ширины

Я создаю веб-приложение с использованием Bootstrap 4 и сталкиваюсь с некоторыми странными проблемами. Я хочу использовать реагирующий на таблицы класс Bootstrap для горизонтальной прокрутки таблиц на мобильных устройствах. На настольных устройствах таблица должна занимать 100% ширины содержащейся DIV.

Как только я применяю класс .table-response к моей таблице, таблица сжимается по горизонтали и больше не занимает 100% ширины. Любые идеи?

Вот моя разметка:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div> 
        <div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td colspan="6"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

Если я применяю ширину 100% к классу .table-response, это делает таблицу самой шириной 100%, но дочерние элементы (TBODY, TR и т. Д.) Все еще узкие.

93

eat-sleep-code

19 Янв 2017 в 20:07

12 ответов

Лучший ответ

Следующее не будет работать. Это вызывает другую проблему. Теперь он будет иметь ширину 100%, но не будет реагировать на меньшие устройства:

.table-responsive {
    display: table;
}

Все эти ответы создали еще одну проблему, рекомендуя display: table;. На данный момент единственное решение — использовать его в качестве оболочки:

<div>
  <table>
...
 </table>
</div>

152

Web_Designer
19 Янв 2017 в 19:33

Это решение сработало для меня:

Просто добавьте еще один класс в элемент таблицы: w-100 d-block d-md-table

Так было бы: <table>

Для начальной загрузки 4 w-100 установите ширину на 100% d-block (отображение: блок) и d-md-table (отображение: таблица на минимальной ширине: 576 пикселей)

Bootstrap 4 отображать документы

37

Faytraneozter
7 Сен 2017 в 10:08

Если вы используете V4.1 и в соответствии с их документами, не присваивайте .table-response непосредственно таблице. Таблица должна быть .table, и если вы хотите, чтобы ее можно было горизонтально прокручивать (отзывчиво), добавьте ее в контейнер, реагирующий на .table (например, <div>).

Адаптивные таблицы позволяют легко перемещать таблицы по горизонтали. Сделайте любую таблицу отзывчивой во всех окнах просмотра, поместив .table в .table-responseive.

<div>
  <table>
  ...
  </table>
</div>

Для этого не нужно никаких дополнительных CSS.

В коде OP можно использовать .table-responseive вместе с .col-md-12 снаружи.

17

Marcelo Myara
30 Авг 2018 в 20:29

Ни один из этих ответов не работает (дата сегодня 9 декабря 2018 года). Правильное решение здесь — добавить .table-responseive-sm к вашей таблице:

<table>
[Your table]
</table>

Это применяет аспект отзывчивости только к представлению SM (мобильному). Таким образом, в мобильном представлении вы получаете прокрутку по желанию, а в более крупных представлениях таблица не реагирует и, таким образом, отображается по всей ширине, как нужно.

Документы: https://getbootstrap.com/docs/4.0/content/tables/ # точек останова конкретных

5

SongBox
9 Дек 2018 в 21:29

Решение, соответствующее v4 платформы, состоит в том, чтобы установить правильную точку останова. Вместо того, чтобы использовать .table-responseive, вы должны иметь возможность использовать .table-responseive-sm (чтобы быть просто отзывчивым на небольших устройствах)

Вы можете использовать любую из доступных конечных точек: реагирующий на таблицу {-sm | -md | -lg | -xl}

2

Rubén_ic
31 Окт 2017 в 15:27

Это потому, что класс .table-responsive добавляет свойство display: block к вашему элементу, которое меняет его по сравнению с предыдущим display: table .

Переопределите это свойство обратно в display: table в своей собственной таблице стилей

.table-responsive {
    display: table;
}

Примечание. Убедитесь, что этот стиль выполняется после кода начальной загрузки, чтобы его можно было переопределить.

1

Nikhil Nanjappa
19 Янв 2017 в 17:31

Я обнаружил, что использование рекомендованного класса-адаптера таблиц в оболочке по-прежнему приводит к (удивительно) горизонтальному сжатию адаптивных таблиц:

<div>
    <table>
        ...
    </table>
</div>

Решением для меня было создать следующие медиа-точки останова и классы для предотвращения этого:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Затем я могу добавить соответствующий класс в мой элемент таблицы. Например:

<div>
    <table>
        ...
    </table>
</div>

Здесь оболочка устанавливает ширину 100% для больших и больших для Bootstrap. С классом table-lg, примененным к элементу таблицы, ширина таблицы также устанавливается равной 100% для больших и больших, но устанавливается равной 992px для средних и меньших. Классы table-xs, table-sm, table-md и table-xl работают одинаково.

0

ScottyB
5 Окт 2018 в 14:29

Для Bootstrap 4.x используйте утилиты отображения:

w-100 d-print-block d-print-table

Использование :

<table>

0

Bora
27 Июн 2019 в 14:03

Это вызвано тем, что класс table-responsive наделяет таблицу свойством display:block, что странно, потому что это переписывает table классы, оригинальные display:table, и поэтому таблица уменьшается при добавлении table-responsive .

Скорее всего, это до начальной загрузки 4, все еще находящейся в dev. Вы можете перезаписать это свойство своим собственным классом, который устанавливает display:table, и это не повлияет на отзывчивость таблицы.

Например

.table-responsive-fix{
   display:table;
}

1

Callum
19 Янв 2017 в 17:31

По какой-то причине адаптивная таблица не работает должным образом. Вы можете исправить это, избавившись от display:block;

.table-responsive {
    display: table;
}

Я могу подать отчет об ошибке.

Edit:

Это существующая ошибка.

6

Serg Chernata
19 Янв 2017 в 17:27

Создавайте адаптивные таблицы, оборачивая любую .table таблицей .table-responseive {-sm | -md | -lg | -xl}, заставляя таблицу прокручиваться горизонтально в каждой точке останова максимальной ширины до (но не включая) 576px, 768px, 992px и 1120px соответственно.

Просто оберните таблицу с помощью .table-responseive {-sm | -md | -lg | -xl}

Например

<div>
    <table>
    </table>
</div>

загрузчик 4 стола

1

iMezied
18 Июл 2019 в 11:03

Принимая во внимание другие ответы, я бы сделал что-то вроде этого, спасибо!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

1

Alexis
5 Июл 2017 в 01:29

Bootstrap Бутстрап 4 Tables — таблицы

Базовая таблица Bootstrap 4

Базовая загрузочная таблица 4 имеет светлую обивку и горизонтальные разделители.

.table класс добавляет базовый стиль к таблице:

Чередующиеся строки

.table-striped класс добавляет к таблице зебра-полосы:

Граница таблицы

.table-bordered класс добавляет границы со всех сторон таблицы и ячеек:

Наведите строки

.table-hover класс добавляет эффект наведения (серый цвет фона) в строках таблицы:

Черный/темный стол

.table-dark класс добавляет черный фон в таблицу:

Темный полосатый стол

Объединить .table-dark и .table-striped создать темный, полосатый стол:

Парящий темный стол

.table-hover класс добавляет эффект наведения (серый цвет фона) в строках таблицы:

Таблица без границ

.table-borderless класс удаляет границы из таблицы:

Контекстные классы

Контекстные классы можно использовать для окраски всей таблицы ( <table> ), строк таблицы ( <tr> ) или ячеек таблицы ( <td> ).

Можно использовать следующие контекстные классы:

Цвета настольной головки

.thead-dark класс добавляет черный фон в заголовки таблицы, а .thead-light класс добавляет серый фон в заголовки таблицы:

Маленький столик

.table-sm класс делает таблицу меньше, сокращая заполнение ячеек пополам:

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

.table-responsive класс создает адаптивную таблицу: горизонтальная полоса прокрутки добавляется к таблице на экранах, которые меньше, чем 992пкс Wide (при необходимости). При просмотре на что-либо больше, чем 992пкс широкий, нет никакой разницы:

Пример

<div>
  <table>
    …
  </table>
</div>

Вы также можете решить, когда таблица должна получить полосу прокрутки, в зависимости от ширины экрана:

Пример

<div>
  <table>
    …
  </table>
</div>

таблиц начальной загрузки

Базовая таблица начальной загрузки

Базовый стол Bootstrap имеет легкую обивку и только горизонтальные разделители.

Класс .table добавляет к таблице базовый стиль:

Пример

Попробуй сам »

полосатые ряды

Класс .table-striped добавляет в таблицу полосы зебры:

Пример

Попробуй сам »

Стол с рамкой

Класс .table-Bordered добавляет границы со всех сторон таблицы и ячеек:

Пример

Попробуй сам »

Ряды при наведении

Класс .table-hover добавляет эффект наведения (серый цвет фона) на строки таблицы:

Пример

Попробуй сам »

Сводная таблица

Класс .table-condensed делает стол более компактным, разрезая заполнение ячеек пополам:

Пример

Попробуй сам »

Контекстные классы

Контекстные классы могут использоваться для раскрашивания строк таблицы (

) или ячеек таблицы (

):

Пример

Имя	Фамилия	Электронная почта
По умолчанию	По умолчанию	def @ somemail.com
Успех	Самка	[email protected]
Опасность	Moe	[email protected]
Информация	Дули	[email protected]
Предупреждение	Реф.	[email protected]
Активный	Активсон	act @ example.com

Попробуй сам »

Можно использовать следующие контекстные классы:

Класс	Описание
. Активный	Применяет цвет наведения к строке таблицы или ячейке таблицы
. Успех	Указывает на успешное или положительное действие
.info	Указывает на нейтральное информативное изменение или действие
.предупреждение	Указывает на предупреждение, которое может потребовать внимания
. Опасность	Указывает на опасное или потенциально негативное действие

---

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

Класс .table-responsive создает адаптивную таблицу. После этого таблица
прокрутите по горизонтали на небольших устройствах (менее 768 пикселей). При просмотре на чем угодно
больше 768 пикселей в ширину, разницы нет:

Пример

<таблица>
…

Попробуй сам »

---

---

Полная ссылка на таблицу начальной загрузки

Чтобы получить полную информацию обо всех классах таблиц, перейдите в нашу полную
Справочник по таблицам начальной загрузки.

Bootstrap 4 таблицы

---

Базовая таблица начальной загрузки 4

Базовый стол Bootstrap 4 имеет легкую обивку и горизонтальные разделители.

Класс .table добавляет к таблице базовый стиль:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

полосатые ряды

Класс .table-striped добавляет в таблицу полосы зебры:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

Стол с рамкой

Класс .table-Bordered добавляет границы со всех сторон таблицы и ячеек:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

---

Ряды при наведении

Класс .table-hover добавляет эффект наведения (серый цвет фона) на строки таблицы:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

Черный / Темный стол

Класс .table-dark добавляет к таблице черный фон:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

Стол в темную полоску

Объедините .table-dark и .table-striped , чтобы создать темный полосатый стол:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

Темный стол Hoverable

Класс .table-hover добавляет эффект наведения (серый цвет фона) на строки таблицы:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

Стол без полей

Класс .table-borderless удаляет границы из таблицы:

Пример

Имя	Фамилия	Электронная почта
Джон	Самка	john @ example.com
Мэри	Moe	[email protected]
июль	Дули	[email protected]

Попробуй сам »

---

Контекстные классы

Контекстные классы могут использоваться для раскрашивания всей таблицы (

),
строки таблицы (

) или ячейки таблицы (

{{- -}}

). Пример Имя Фамилия Электронная почта По умолчанию По умолчанию def @ somemail.com Первичный Джо [email protected] Успех Самка [email protected] Опасность Moe [email protected] Информация Дули [email protected] Предупреждение Реф. bo @ пример.com Активный Активсон [email protected] Вторичная Секундсон [email protected] Свет Энджи [email protected] Темный Bo [email protected] Попробуй сам » Можно использовать следующие контекстные классы: Класс Описание .таблица первичная Синий: указывает на важное действие . Стол-успех Зеленый: указывает на успешное или положительное действие . Опасный стол Красный: указывает на опасное или потенциально негативное действие . Таблица Голубой: указывает на нейтральное информативное изменение или действие . Таблица-предупреждение Оранжевый: указывает на предупреждение, которое может потребовать внимания. .стол-актив Серый: применяет цвет наведения к строке таблицы или ячейке таблицы . Стол-вторичный Серый: указывает на менее важное действие . Настольный светильник Светло-серый фон таблицы или строки таблицы . Стол темный Темно-серый стол или фон строки таблицы Цвета головки стола Модель .Класс thead-dark добавляет черный фон к заголовкам таблиц, а класс .thead-light добавляет серый фон к заголовкам таблиц: Пример Имя Фамилия Электронная почта Джон Самка [email protected] Мэри Moe [email protected] июль Дули июль @ пример.com Имя Фамилия Электронная почта Джон Самка [email protected] Мэри Moe [email protected] июль Дули [email protected] Попробуй сам » Маленький стол Класс .table-sm делает таблицу меньше, разрезая заполнение ячеек пополам: Пример Имя Фамилия Электронная почта Джон Самка john @ example.com Мэри Moe [email protected] июль Дули [email protected] Попробуй сам » Адаптивные таблицы Класс .table-responsive добавляет полосу прокрутки к столу при необходимости (когда он велик по горизонтали): Пример … Попробуй сам » Вы также можете решить, когда в таблице должна появиться полоса прокрутки, в зависимости от ширины экрана: Класс Ширина экрана .таблица-отзывчивый-см <576 пикселей .table-responsive-md <768 пикселей .table-response-lg <992 пикс. .table-responseive-xl <1200 пикселей Пример … Попробуй сам » Адаптивная таблица Bootstrap 4 — примеры и руководство.Базовое и расширенное использование Компиляция и настройка Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только эти компоненты и функции, которые вам нужны. Если вам нужна дополнительная помощь в компиляции пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке. Руководство по компиляции и настройке Карта зависимостей файлов SCSS в MDBootstrap: Легенда: '->' означает 'требуется' Все бесплатные и профессиональные файлы требуют файлов из каталога 'core' 'none' означает 'этот компонент не требует ничего, кроме файлов ядра' Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы. Все компоненты PRO требуют 'pro / _variables.scss 'файл scss / | | - ядро ​​/ | | | | - бутстрап / | | | - _functions.scss | | | - _variables.scss | | | | - _colors.scss | | - _global.scss | | - _helpers.scss | | - _masks.scss | | - _mixins.scss | | - _typography.scss | | - _variables.scss | | - _waves.scss | | - бесплатно / | | - _animations-basic.scss -> нет | | - _animations-extended.scss -> _animations-basic.scss | | - _buttons.scss -> нет | | - _cards.scss -> нет | | - _dropdowns.scss -> нет | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss | | - _navbars.scss -> нет | | - _pagination.scss -> нет | | - _badges.scss -> нет | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss) | | - _carousels.scss -> | | - _forms.scss -> нет | | - _msc.scss -> нет | | - _footers.scss нет (PRO :) | | - _list-group.scss -> нет | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss ) | | - _depreciated.scss | | - pro / | | | | - сборщик / | | | - _default.scss -> нет | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss | | | | - разделы / | | | - _templates.scss -> _sidenav.scss | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss, | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss | | | - _magazine.scss -> _badges.scss | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss | | | | - _variables.scss | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss | | - _tabs.scss -> _cards.scss | | - _cards.scss -> бесплатно / _cards.scss | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :) | | - _scrollspy.scss -> нет | | - _lightbox.scss -> нет | | - _chips.scss -> нет | | - _msc.scss -> нет | | - _forms.scss -> нет | | - _radio.scss -> нет | | - _checkbox.scss -> нет | | - _material-select.scss -> нет | | - _switch.scss -> нет | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss | | - _range.scss -> нет | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss | | - _autocomplete.scss -> бесплатно / _forms.scss | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss | | - _parallax.scss -> нет | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss | | - _steppers.scss -> бесплатно / _buttons.scss | | - _blog.scss -> нет | | - _toasts.scss -> бесплатно / _buttons.scss | | - _animations.scss -> нет | | - _charts.scss -> нет | | - _progress.scss -> нет | | - _scrollbar.scss -> нет | | - _skins.scss -> нет | | - _устарело.scss | `- _custom-skin.scss `- _custom-styles.scss `- _custom-variables.scss `- mdb.scss Карта зависимостей модулей JavaScript в MDBootstrap: Легенда: '->' означает 'требуется' Все файлы требуют jQuery и bootstrap.js js / ├── dist / │ ├── buttons.js │ ├── cards.js │ ├── character-counter.js │ ├── chip.js │ ├── collapsible.js -> vendor / velocity.js │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js │ ├── file-input.js │ ├── forms-free.js │ ├── material-select.js -> dropdown.js │ ├── mdb-autocomplete.js │ ├── preloading.js │ ├── range-input.js -> vendor / velocity.js │ ├── scrolling-navbar.js │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js │ └── smooth-scroll.js ├── _intro-mdb-pro.js ├── modules.js ├── src / │ ├── buttons.js │ ├── карты.js │ ├── character-counter.js │ ├── chip.js │ ├── collapsible.js -> vendor / velocity.js │ ├── dropdown.js -> Popper.js, jquery.easing.js │ ├── file-input.js │ ├── forms-free.js │ ├── material-select.js -> dropdown.js │ ├── mdb-autocomplete.js │ ├── preloading.js │ ├── range-input.js -> vendor / velocity.js │ ├── scrolling-navbar.js │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js │ └── smooth-scroll.js └── продавец / ├── аддоны / │ ├── datatables.js │ └── datatables.min.js ├── chart.js ├── extended-modals.js ├── hammer.js ├── jarallax.js ├── jarallax-video.js -> vendor / jarallax.js ├── jquery.easing.js ├── jquery.easypiechart.js ├── jquery.hammer.js -> vendor / hammer.js ├── jquery.sticky.js ├── lightbox.js ├── picker-date.js -> vendor / picker.js ├── picker.js ├── picker-time.js -> vendor / picker.js ├── scrollbar.js ├── scrolling-navbar.js ├── toastr.js ├── velocity.js ├── waves.js └── wow.js css — таблица начальной загрузки не отвечает css — таблица начальной загрузки не отвечает — qaru Спросил 4 года, 11 месяцев назад Просмотрено 17к раз У меня есть таблица, которая заполняет данные из базы данных.Хотя мне приходилось использовать начальную загрузку, когда я продолжал уменьшать ширину браузера, с одного момента таблица выходит за пределы контейнера. Как я могу сделать это отзывчивым? Ниже приведены прикрепленные изображения <таблица>
Запасной идентификатор	Номер детали	Количество	Цена	Гарантия	Описание	Запасное изображение
id;?>	partNumber;?>	количество;?>	цена;?>	гарантия;?>	image). '" />';?>	Изменить Удалить

Создан 09 ноя.

хешанхешан

49211 золотой знак77 серебряных знаков2121 бронзовый знак

3

Если вы используете bootstrap.Оберните свою таблицу в div с классом , отвечающим за таблицу.

  

    <таблица>
       ...
    
 
  

Это должно работать, если начальная загрузка правильно интегрирована. Пожалуйста, покажите свой код. Вам поможет еще много людей.

Вы можете найти эту конкретную информацию здесь:
https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables

Создан 09 ноя.

Нет

86399 серебряных знаков1919 бронзовых знаков

0

Я много работал над этой проблемой и нашел хорошее решение этой проблемы с быстродействием таблицы начальной загрузки.Просто используйте приведенный ниже CSS:

  .table {
   отображение: блок! важно;
   переполнение-x: авто! важно;
   ширина: 100%! важно;
 }
  

Создан 10 ноя.

Добавьте эту строку, это решит вашу проблему.

Создан 23 авг.

0

Убедитесь, что родительские элементы

этого элемента не должны иметь ширину более 100%.Это означает, что родительский элемент должен иметь определенную ширину

  

  <таблица>
    
      
         # 
         Первый 
         Последний 
         Дескриптор 
      
    
    
      
         1 
         Отметить 
         Отто 
         @mdo 
      
      
         2 
         Джейкоб 
         Торнтон 
         @fat 
      
      
         3 
         Птица Ларри 
         @twitter 
      
    
  
  

ответ дан 14 окт.

МД ШАЙОНМД ШАЙОН

4,3112727 серебряных знаков2828 бронзовых знаков

язык-php

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Как сделать существующую таблицу начальной загрузки 2 адаптивной?

< html lang = "en" >

< < мета кодировка = "utf-8" >

< мета имя = 000 000 000 000 "область просмотра" " ширина = устройство -ширина,

начальная шкала = 1 ,

-to-fit ">

< ссылка 900 09 отн = "таблица стилей"

HREF =

целостности =

"SHA384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"

crossorigin = "анонимный" >

< title > Bootstrap | Таблицы title >

< style >

h2 {

синий; синий

выравнивание текста: по центру;

}

div {

margin-top: 20px;

}

стиль >

головка

< div class = «контейнер» >

< h2 > Bootstrap Table Responsive 9000 9-sm

< div class = "table-responsive-sm" >

000 000 000000000000000000000 таблица класс = «таблица» > 900 09

< thead >

< tr >

< th 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 Головка td >

< th scope = "col" > Головка td -й объем = "столбец" > Головка td >

< -й объем = "столбец " "" td >

< th сфера действия = "col" > Head td >

< th scope = "col" > Head td> td>

< th scope = "col" > Head td >

< 000 000 000 9000 col " > Голова td >

< th область действия = " col " > Голова 9000 < th сфера действия = "col" > Head td >

900 08 < th scope = "col" > Head td >

< th scope " " > Головка td >

tr >

бортов > 0000009000 >

< tr >

< td > Данные td > 000 9000000 9000000 Данные td >

< td > Данные td >

< td > Данные td >

< 0000009

< td > Данные td >

< td > Данные 9000 9000 000 9000 000 9000 td > Данные td >

< td > Данные td > Данные td >

< td > Данные t d >

< td > Данные td >

tr >

< td > Данные td >

< td

> < td > Данные td >

< td > Данные td > > td td > Данные td >

< 9 0008 td > Данные td >

< td > Данные td >

>

>

td >

< td > Данные td >

< 000 td> >

< td > Данные td >

< td 000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 > tr >

< tr >

< td > Данные td >

< td > Данные td > > td td > Данные td >

< td > Данные td >

/ td >

< td > Данные td >

< 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 >

< td > Данные td >

< td > Данные td >

< td > Данные td > Данные td >

< td > Данные td >

000

кузова >

таблица >

000 9000 9000 div >

корпус >

html >

Адаптивные таблицы - Документация - Bootstrap Essentials

Создайте адаптивные таблицы, обернув любые .table в .table-responsive , чтобы они прокручивались по горизонтали на небольших устройствах (менее 768 пикселей). При просмотре на объектах шириной более 768 пикселей вы не увидите никакой разницы в этих таблицах.

Вертикальная обрезка / усечение

Адаптивные таблицы используют overflow-y: hidden , который отсекает любое содержимое, выходящее за пределы нижнего или верхнего края таблицы. В частности, это может вырезать раскрывающиеся меню и другие сторонние виджеты.

Firefox и наборы полей

Firefox имеет неудобный стиль набора полей, включающий шириной , что мешает адаптивной таблице. Это не может быть отменено без специального взлома Firefox, который мы не предоставляем в Bootstrap:

  @ -moz-document url-prefix () {
  набор полей {отображение: таблица-ячейка; }
}  

Для получения дополнительной информации прочтите этот ответ о переполнении стека.

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
2	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
3	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы

#	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
1	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
2	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
3	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы

  

  <таблица>
    ...
  
  

Родственные классы:

bootstrap 3.3 пример кода адаптивного кода таблицы

Пример 1: таблица начальной загрузки плотная

  
<таблица>
  ...


<таблица>
  ...
  

Пример 2: таблица начальной загрузки 3

  Базовая таблица начальной загрузки
 Базовая таблица Bootstrap имеет легкую обивку и только горизонтальные разделители.Класс .table добавляет к таблице базовый стиль.
 -------------------------------------------------- ----------
 Полосатые ряды
 Класс .table-striped добавляет в таблицу полосы зебры.
Стол с границами
 Класс .table-bordered добавляет границы со всех сторон таблицы и ячеек.
 -------------------------------------------------- ----------
 Hover Rows
 Класс .table-hover добавляет эффект наведения (серый цвет фона) на строки таблицы.
 -------------------------------------------------- ----------
 Сводная таблица
 Файл.table-condensed class делает стол более компактным, сокращая заполнение ячеек пополам
 -------------------------------------------------- ----------
 Контекстные классы
 Контекстные классы могут использоваться для раскрашивания строк таблицы (
) или ячеек таблицы (
)
Можно использовать следующие контекстные классы:
Описание класса
 .active Применяет цвет наведения к строке или ячейке таблицы.
 .success Указывает на успешное или положительное действие
 .info Обозначает нейтральное информативное изменение или действие.
 .warning Обозначает предупреждение, которое может потребовать внимания.
 .опасность Указывает на опасное или потенциально негативное действие
 -------------------------------------------------- ----------
 Адаптивные таблицы
 Класс .table-responsive создает адаптивную таблицу. После этого таблица будет прокручиваться по горизонтали на небольших устройствах (менее 768 пикселей). При просмотре на чем-либо большем, чем 768 пикселей в ширину, нет никакой разницы
Образец кода





Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт