Преминете към основното съдържание Преминете към навигацията с документи
Check
in English

Маси

Документация и примери за избор на стил на таблици (като се има предвид преобладаващата им употреба в JavaScript добавки) с Bootstrap.

На тази страница

Преглед

Поради широкото използване на <table>елементи в уиджети на трети страни като календари и инструменти за избор на дати, таблиците на Bootstrap са opt-in . Добавете основния клас .tableкъм който и да е <table>, след което разширете с нашите незадължителни класове модификатори или персонализирани стилове. Всички стилове на таблици не се наследяват в Bootstrap, което означава, че всички вложени таблици могат да бъдат стилизирани независимо от родителя.

Използвайки най-основното маркиране на таблици, ето как .tableизглеждат базираните на таблици таблици в Bootstrap.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>
Предаване на значение на помощните технологии

Използването на цвят за добавяне на смисъл осигурява само визуална индикация, която няма да бъде предадена на потребителите на помощни технологии – като екранни четци. Уверете се, че информацията, обозначена с цвета, е или очевидна от самото съдържание (напр. видимия текст), или е включена чрез алтернативни средства, като например допълнителен текст, скрит с .visually-hiddenкласа.

Маси с акценти

Раирани редове

Използвайте .table-striped, за да добавите зебра към всеки ред на таблица в рамките на <tbody>.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-striped">
  ...
</table>

Раирани колони

Използвайте .table-striped-columns, за да добавите зебра към всяка колона на таблицата.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-striped-columns">
  ...
</table>

Тези класове също могат да се добавят към варианти на таблици:

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-dark table-striped">
  ...
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-success table-striped">
  ...
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-success table-striped-columns">
  ...
</table>

Подвижни редове

Добавете .table-hover, за да активирате състояние на задържане върху редове на таблица в рамките на <tbody>.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-hover">
  ...
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-dark table-hover">
  ...
</table>

Тези реещи се редове могат да се комбинират и с варианта с раирани редове:

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-striped table-hover">
  ...
</table>

Активни маси

Маркирайте ред или клетка от таблица, като добавите .table-activeклас.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Как работят вариантите и таблиците с акценти?

За таблиците с ударения ( редове с ивици, колони с ивици , редове с възможност за задържане и активни таблици ) използвахме някои техники, за да накараме тези ефекти да работят за всички наши варианти на таблици :

  • Започваме със задаване на фона на клетка от таблица с--bs-table-bg персонализираното свойство. След това всички варианти на таблица задават това персонализирано свойство, за да оцветят клетките на таблицата. По този начин няма да си навлечем проблеми, ако се използват полупрозрачни цветове като фон на маса.
  • След това добавяме сянка на вмъкната кутия върху клетките на таблицата със box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);слой върху който и да е посочен background-color. Тъй като използваме огромно разпространение и без размазване, цветът ще бъде монотонен. От--bs-table-accent-bg не е зададено по подразбиране, нямаме сянка на полето по подразбиране.
  • Когато се добавят .table-striped, .table-striped-columns, .table-hoverили .table-activeкласове, --bs-table-accent-bgсе задава полупрозрачен цвят за оцветяване на фона.
  • За всеки вариант на таблицата ние генерираме --bs-table-accent-bgцвят с най-висок контраст в зависимост от този цвят. Например цветът на акцента за .table-primaryе по-тъмен, докато .table-darkима по-светъл цвят на акцента.
  • Цветовете на текста и границите се генерират по същия начин и техните цветове се наследяват по подразбиране.

Зад кулисите изглежда така:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Граници на масата

Оградени маси

Добавете .table-borderedза граници от всички страни на таблицата и клетките.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-bordered">
  ...
</table>

Помощни програми за цвят на границите могат да се добавят за промяна на цветовете:

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-bordered border-primary">
  ...
</table>

Маси без граници

Добавете .table-borderlessза маса без граници.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-borderless">
  ...
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-dark table-borderless">
  ...
</table>

Малки маси

Добавете .table-sm, за да стане по .table-компактен, като разрежете цялата клетка paddingнаполовина.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-sm">
  ...
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-dark table-sm">
  ...
</table>

Разделители на маси за групи

Добавете по-дебела рамка, по-тъмна между групите таблици— <thead>, <tbody>и <tfoot>—с .table-group-divider. Персонализирайте цвета, като промените border-top-color(за който в момента не предоставяме полезен клас).

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър
html 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <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>

Вертикално подравняване

Клетките на таблицата <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;от таблицата Тази клетка е подравнена към горната част. Това тук е текст на контейнер, предназначен да заема доста малко вертикално пространство, за да демонстрира как работи вертикалното подравняване в предходните клетки. 
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Гнездене

Стилове на граници, активни стилове и варианти на таблици не се наследяват от вложени таблици.

# Първо Последно Дръжка
1 Марк Ото @mdo
Заглавка Заглавка Заглавка
А Първо Последно
б Първо Последно
° С Първо Последно
3 Лари птицата @туитър 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Как работи гнезденето

За да предотвратим изтичане на стилове към вложени таблици, ние използваме >селектора за дъщерен комбинатор ( ) в нашия CSS. Тъй като трябва да насочим всички tds и ths в thead, tbodyи tfoot, нашият селектор би изглеждал доста дълъг без него. Като такъв, ние използваме доста странно изглеждащия .table > :not(caption) > * > *селектор за насочване към всички tds и ths на.table , но нито една от потенциално вложени таблици.

Имайте предвид, че ако добавите <tr>s като директни деца на таблица, те <tr>ще бъдат обвити в a <tbody>по подразбиране, като по този начин нашите селектори работят по предназначение.

Анатомия

Глава на масата

Подобно на таблиците и тъмните таблици, използвайте модификаторните класове .table-lightили .table-dark, за да <thead>изглеждат светло или тъмно сиви.

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Крак за маса

# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър
Долен колонтитул Долен колонтитул Долен колонтитул Долен колонтитул 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Надписи

A <caption>функционира като заглавие за таблица. Помага на потребителите с екранни четци да намерят таблица и да разберат за какво става въпрос и да решат дали искат да я прочетат.

Списък на потребителите
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Птицата Лари @туитър 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Можете също да поставите най <caption>-отгоре на масата с .caption-top.

Списък на потребителите
# Първо Последно Дръжка
1 Марк Ото @mdo
2 Джейкъб Торнтън @дебел
3 Лари птицата @туитър
html 
<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</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>

Отзивчиви маси

Отзивчивите таблици позволяват лесно превъртане на таблиците хоризонтално. Направете всяка таблица отзивчива във всички прозорци, като обвиете a .tableс .table-responsive. Или изберете максимална точка на прекъсване, до която да имате отзивчива таблица, като използвате .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Вертикално изрязване/отрязване

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

Винаги отзивчив

През всяка точка на прекъсване използвайте .table-responsiveза хоризонтално превъртащи се таблици.

# Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие
1 клетка клетка клетка клетка клетка клетка клетка клетка клетка
2 клетка клетка клетка клетка клетка клетка клетка клетка клетка
3 клетка клетка клетка клетка клетка клетка клетка клетка клетка 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Специфична точка на прекъсване

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

Тези таблици може да изглеждат счупени, докато техните адаптивни стилове не се приложат при определени ширини на прозореца за изглед.

# Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие
1 клетка клетка клетка клетка клетка клетка клетка клетка
2 клетка клетка клетка клетка клетка клетка клетка клетка
3 клетка клетка клетка клетка клетка клетка клетка клетка
# Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие
1 клетка клетка клетка клетка клетка клетка клетка клетка
2 клетка клетка клетка клетка клетка клетка клетка клетка
3 клетка клетка клетка клетка клетка клетка клетка клетка
# Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие
1 клетка клетка клетка клетка клетка клетка клетка клетка
2 клетка клетка клетка клетка клетка клетка клетка клетка
3 клетка клетка клетка клетка клетка клетка клетка клетка
# Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие
1 клетка клетка клетка клетка клетка клетка клетка клетка
2 клетка клетка клетка клетка клетка клетка клетка клетка
3 клетка клетка клетка клетка клетка клетка клетка клетка
# Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие
1 клетка клетка клетка клетка клетка клетка клетка клетка
2 клетка клетка клетка клетка клетка клетка клетка клетка
3 клетка клетка клетка клетка клетка клетка клетка клетка
# Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие Заглавие
1 клетка клетка клетка клетка клетка клетка клетка клетка
2 клетка клетка клетка клетка клетка клетка клетка клетка
3 клетка клетка клетка клетка клетка клетка клетка клетка 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

дързък

Променливи

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Цикъл

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Персонализиране

  • Факторните променливи ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) се използват за определяне на контраста във вариантите на таблицата.
  • Освен светлите и тъмните варианти на масата, цветовете на темата се изсветляват от $table-bg-scaleпроменливата.