Кестелер

Bootstrap көмегімен кестелерді сәндеуге (олардың JavaScript плагиндерінде кеңінен қолданылуын ескере отырып) қосылуға арналған құжаттама және мысалдар.

Бұл бетте

Шолу

<table>Күнтізбелер мен күн таңдаушылары сияқты үшінші тарап виджеттері арқылы элементтерді кеңінен пайдалануына байланысты Bootstrap кестелері қосылуға мүмкіндік береді . Негізгі сыныпты .tableкез келгенге қосыңыз <table>, содан кейін қосымша модификатор сыныптарымен немесе реттелетін мәнерлермен кеңейтіңіз. Барлық кесте мәнерлері Bootstrap жүйесінде мұраланбайды, яғни кез келген кірістірілген кестелерді ата-анадан тәуелсіз стильдеуге болады.

Ең негізгі кестені белгілеуді пайдаланып, .tableBootstrap қолданбасында негізделген кестелер қалай көрінеді.

#	Бірінші	Соңғы	Тұтқаны
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

Тақырып	Тақырып	Тақырып
А	Бірінші	Соңғы
Б	Бірінші	Соңғы
C	Бірінші	Соңғы

Ларри

құс

@twitter

<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 мәндерін белгілеуіміз керек болғандықтан , онсыз селекторымыз өте ұзақ көрінеді. Осылайша, біз барлық s және s бағыттау үшін өте біртүрлі көрінетін селекторды пайдаланамыз , бірақ кез келген ықтимал кірістірілген кестелердің ешқайсысы.theadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>Егер кестенің тікелей еншілестері ретінде s қоссаңыз , олар әдепкі <tr>бойынша a ішіне оралатынын <tbody>ескеріңіз, осылайша біздің селекторлар белгіленгендей жұмыс істейді.

Анатомия

Үстел басы

Кестелер мен күңгірт кестелерге ұқсас, модификатор сыныптарын пайдаланыңыз .table-lightнемесе s ашық немесе қою сұр болып көрінуі .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айнымалы арқылы жеңілдетілген.