in English

Табліцы

Дакументацыя і прыклады выбарнага стылю табліц (улічваючы іх пераважнае выкарыстанне ў плагінах JavaScript) з дапамогай Bootstrap.

На гэтай старонцы

Агляд

З-за шырокага выкарыстання <table>элементаў у віджэтах іншых вытворцаў, такіх як календары і сродкі выбару даты, табліцы Bootstrap даступныя для выбару . Дадайце базавы клас .tableу любы <table>, а затым пашырыце з дапамогай нашых дадатковых класаў-мадыфікатараў або карыстацкіх стыляў. Усе стылі табліц не ўспадкоўваюцца ў Bootstrap, гэта значыць любыя ўкладзеныя табліцы могуць быць стылізаваны незалежна ад бацькоўскай.

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

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<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	Птушка Лары		@twitter

<table class="table table-striped">
  ...
</table>

Паласатыя калоны

Выкарыстоўвайце .table-striped-columns, каб дадаць зебрападобныя паласы ў любы слупок табліцы.

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-striped-columns">
  ...
</table>

Гэтыя класы таксама можна дадаць да варыянтаў табліцы:

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-dark table-striped-columns">
  ...
</table>

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-success table-striped">
  ...
</table>

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-success table-striped-columns">
  ...
</table>

Навісныя шэрагі

Дадайце .table-hover, каб уключыць стан навядзення на радкі табліцы ў межах <tbody>.

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-hover">
  ...
</table>

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Гэтыя плыўныя шэрагі таксама можна спалучаць з варыянтам паласатых шэрагаў:

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Актыўныя табліцы

Вылучыце радок або ячэйку табліцы, дадаўшы .table-activeклас.

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<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	Птушка Лары		@twitter

<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	Птушка Лары		@twitter

<table class="table table-bordered">
  ...
</table>

Для змены колераў можна дадаць утыліты колеру межаў :

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Табліцы без рамак

Дадайце .table-borderlessдля табліцы без межаў.

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-borderless">
  ...
</table>

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Маленькія столікі

Дадайце .table-sm, каб зрабіць .tableбольш кампактным, разрэзаўшы ўсю клетку paddingнапалову.

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

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

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Раздзяляльнікі для груп табліцы

Дадайце больш тоўстую мяжу, больш цёмную паміж групамі табліц— <thead>, <tbody>, і <tfoot>—з дапамогай .table-group-divider. Наладзьце колер, змяніўшы border-top-color(для якога ў цяперашні час мы не прапануем клас карыснасці).

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

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>

Гняздаванне

Стылі межаў, актыўныя стылі і варыянты табліц не ўспадкоўваюцца ўкладзенымі табліцамі.

Першы

Апошні

Ручка

Марк

Ота

@mdo

Загаловак	Загаловак	Загаловак
А	Першы	Апошні
Б	Першы	Апошні
С	Першы	Апошні

Лары

птушка

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Як працуе гнездаванне

Каб прадухіліць уцечку стыляў ва ўкладзеныя табліцы, мы выкарыстоўваем >селектар даччынага камбінатара ( ) у нашым CSS. Паколькі нам трэба нацэліцца на ўсе tdс і thс у thead, tbodyі tfoot, наш селектар без яго выглядаў бы даволі доўга. Такім чынам, мы выкарыстоўваем даволі дзіўна выглядаючы .table > :not(caption) > * > *селектар, каб нацэліць на ўсе tds і ths.table , але ні на адну патэнцыйна ўкладзеную табліцу.

Звярніце ўвагу, што калі вы дадаеце <tr>s як прамых даччыных элементаў табліцы, яны <tr>будуць загорнуты ў a<tbody> па змаўчанні, дзякуючы чаму нашы селектары будуць працаваць належным чынам.

Анатомія

Галава стала

Падобна табліцам і цёмным табліцам, выкарыстоўвайце класы-мадыфікатары .table-lightабо .table-dark, каб яны <thead>выглядалі светла- або цёмна-шэрымі.

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ножка стала

#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter
Ніжні калонтытул	Ніжні калонтытул	Ніжні калонтытул	Ніжні калонтытул

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Тытры

Функцыянуе <caption>як загаловак табліцы. Гэта дапамагае карыстальнікам з праграмамі чытання з экрана знайсці табліцу і зразумець, пра што яна, а таксама вырашыць, ці хочуць яны яе прачытаць.

Спіс карыстальнікаў
#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Птушка Лары		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Вы таксама можаце паставіць <caption>уверсе табліцы з дапамогай .caption-top.

Спіс карыстальнікаў
#	Першы	Апошні	Ручка
1	Марк	Ота	@mdo
2	Якаў	Торнтан	@тоўсты
3	Лары	птушка	@twitter

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>

Адаптыўныя табліцы

Адаптыўныя табліцы дазваляюць з лёгкасцю пракручваць табліцы гарызантальна. .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зменнай.