Документация и примеры оформления таблиц (учитывая их широкое использование в плагинах JavaScript) с помощью Bootstrap.
На этой странице
Обзор
Из-за широкого использования <table>элементов в сторонних виджетах, таких как календари и средства выбора даты, таблицы Bootstrap являются опциональными . Добавьте базовый класс .tableв любой <table>, а затем добавьте наши необязательные классы-модификаторы или пользовательские стили. Все стили таблиц не наследуются в Bootstrap, что означает, что любые вложенные таблицы могут иметь стили независимо от родителя.
Используя самую простую разметку таблиц, вот как .tableтаблицы на основе - выглядят в Bootstrap.
#
Первый
Последний
Справиться
1
Отметка
Отто
@мдо
2
Джейкоб
Торнтон
@толстый
3
Ларри Птица
@твиттер
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Варианты
Используйте контекстные классы для окрашивания таблиц, строк таблиц или отдельных ячеек.
Учебный класс
Заголовок
Заголовок
По умолчанию
Клетка
Клетка
Начальный
Клетка
Клетка
Среднее
Клетка
Клетка
Успех
Клетка
Клетка
Опасность
Клетка
Клетка
Предупреждение
Клетка
Клетка
Информация
Клетка
Клетка
Легкий
Клетка
Клетка
Темный
Клетка
Клетка
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Передача смысла вспомогательным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый вместе с .visually-hiddenклассом.
Акцентированные таблицы
Полосатые ряды
Используйте .table-striped, чтобы добавить чередование зебры к любой строке таблицы в файле <tbody>.
#
Первый
Последний
Справиться
1
Отметка
Отто
@мдо
2
Джейкоб
Торнтон
@толстый
3
Ларри Птица
@твиттер
<tableclass="table table-striped">
...
</table>
Эти классы также могут быть добавлены к вариантам таблицы:
Начнем с установки фона ячейки таблицы с --bs-table-bgпользовательским свойством. Затем все варианты таблицы задают это настраиваемое свойство для раскрашивания ячеек таблицы. Таким образом, у нас не возникнет проблем, если в качестве фона таблицы будут использоваться полупрозрачные цвета.
Затем мы добавляем тень блока вставки в ячейки таблицы с помощью box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);слоя to поверх любого указанного background-color. Поскольку мы используем огромный разброс и не размываем, цвет будет монотонным. Поскольку --bs-table-accent-bgпо умолчанию он не установлен, у нас нет тени по умолчанию.
Когда добавляются классы или .table-striped, для цвета фона устанавливается полупрозрачный цвет..table-hover.table-active--bs-table-accent-bg
Для каждого варианта таблицы мы генерируем --bs-table-accent-bgцвет с максимальной контрастностью в зависимости от этого цвета. Например, цвет акцента .table-primaryтемнее, а .table-darkцвет акцента светлее.
Цвета текста и границ генерируются одинаково, и их цвета наследуются по умолчанию.
Ячейки таблицы <thead>всегда выравниваются по вертикали по нижнему краю. Ячейки таблицы <tbody>наследуют свое выравнивание <table>и по умолчанию выравниваются по верхнему краю. Используйте классы вертикального выравнивания для повторного выравнивания там, где это необходимо.
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Эта ячейка наследуется vertical-align: middle;от таблицы
Эта ячейка наследуется vertical-align: middle;от таблицы
Эта ячейка наследуется vertical-align: middle;от таблицы
Это текст-заполнитель, предназначенный для того, чтобы занять довольно много места по вертикали, чтобы продемонстрировать, как работает вертикальное выравнивание в предыдущих ячейках.
Эта ячейка наследуется vertical-align: bottom;от строки таблицы
Эта ячейка наследуется vertical-align: bottom;от строки таблицы
Эта ячейка наследуется vertical-align: bottom;от строки таблицы
Это текст-заполнитель, предназначенный для того, чтобы занять довольно много места по вертикали, чтобы продемонстрировать, как работает вертикальное выравнивание в предыдущих ячейках.
Эта ячейка наследуется vertical-align: middle;от таблицы
Эта ячейка наследуется vertical-align: middle;от таблицы
Эта ячейка выравнивается по верхнему краю.
Это текст-заполнитель, предназначенный для того, чтобы занять довольно много места по вертикали, чтобы продемонстрировать, как работает вертикальное выравнивание в предыдущих ячейках.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Вложение
Стили границ, активные стили и варианты таблиц не наследуются вложенными таблицами.
Чтобы предотвратить утечку стилей во вложенные таблицы, мы используем селектор дочернего комбинатора ( >) в нашем CSS. Так как нам нужно настроить таргетинг на все tds и ths в thead, tbody, и tfoot, без него наш селектор выглядел бы довольно длинным. Таким образом, мы используем довольно странный .table > :not(caption) > * > *селектор для нацеливания на все tds и ths из .table, но не на какие-либо потенциальные вложенные таблицы.
Обратите внимание, что если вы добавите <tr>s в качестве прямых дочерних элементов таблицы, они <tr>будут заключены в a <tbody>по умолчанию, что заставит наши селекторы работать так, как предполагалось.
Анатомия
Глава таблицы
Подобно таблицам и темным таблицам, используйте классы-модификаторы .table-lightили .table-dark, чтобы сделать <thead>s светло- или темно-серыми.
Функционирует <caption>как заголовок для таблицы. Это помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, хотят ли они ее прочитать.
Список пользователей
#
Первый
Последний
Справиться
1
Отметка
Отто
@мдо
2
Джейкоб
Торнтон
@толстый
3
Ларри Птица
@твиттер
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Вы также можете поместить в <caption>верхней части таблицы с помощью .caption-top.
Список пользователей
#
Первый
Последний
Справиться
1
Отметка
Отто
@мдо
2
Джейкоб
Торнтон
@толстый
3
Ларри
птица
@твиттер
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Адаптивные таблицы
Адаптивные таблицы позволяют с легкостью прокручивать таблицы по горизонтали. Сделайте любую таблицу отзывчивой во всех окнах просмотра, обернув файл с .tableрасширением .table-responsive. Или выберите максимальную точку останова, до которой должна быть настроена отзывчивая таблица, используя .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Вертикальное отсечение/усечение
Адаптивные таблицы используют overflow-y: hidden, который обрезает любой контент, выходящий за нижний или верхний края таблицы. В частности, это может обрезать выпадающие меню и другие сторонние виджеты.
Всегда отзывчивый
Через каждую точку останова используйте .table-responsiveдля таблиц с горизонтальной прокруткой.
Используйте .table-responsive{-sm|-md|-lg|-xl|-xxl}по мере необходимости для создания адаптивных таблиц до определенной точки останова. Начиная с этой точки останова и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.
Эти таблицы могут казаться сломанными, пока их адаптивные стили не будут применены к определенной ширине области просмотра.
Факторные переменные ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) используются для определения контраста в вариантах таблицы.
Помимо вариантов светлого и темного стола, цвета темы осветляются $table-bg-levelпеременной.