Ҷадвалҳо

Ҳуҷҷатҳо ва мисолҳо барои интихоби тарҳрезии ҷадвалҳо (бо назардошти истифодаи маъмули онҳо дар плагинҳои 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>

Ин синфҳоро инчунин ба вариантҳои ҷадвал илова кардан мумкин аст:

#	Аввал	Охирин	Дастак кардан
1	Марк	Отто	@mdo
2	Яъқуб	Торнтон	@фарбеҳ
3	Ларри парранда		@twitter

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

#	Аввал	Охирин	Дастак кардан
1	Марк	Отто	@mdo
2	Яъқуб	Торнтон	@фарбеҳ
3	Ларри парранда		@twitter

<table class="table table-success table-striped">
  ...
</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-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));

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

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Сарҳадҳои ҷадвал

Ҷадвалҳои сарҳадӣ

Барои .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>мувофиқати худро аз он мерос мегиранд <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-ро дар thead, tbody, ва tfoot, ҳадаф қарор диҳем, селектори мо бидуни он хеле тӯлонӣ хоҳад буд. .table > :not(caption) > * > *Ҳамин тариқ, мо селектори ба назар аҷиберо истифода мебарем, то ҳама tds ва ths -ро ҳадаф қарор диҳанд .table, аммо ҳеҷ яке аз ҷадвалҳои эҳтимолии лона гузошташуда.

Аҳамият диҳед, ки агар шумо <tr>s-ро ҳамчун кӯдакони мустақими ҷадвал илова кунед, онҳо ба таври нобаёнӣ <tr>ба a печонида мешаванд ва ҳамин тавр интихобкунандагони мо мувофиқи таъинот кор мекунанд.<tbody>

Анатомия

Сарвари миз

Ба монанди ҷадвалҳо ва ҷадвалҳои торик, синфҳои тағирдиҳандаро истифода баред .table-lightё .table-darkбарои <thead>пайдо кардани s хокистарии сабук ё торикро истифода баред.

#	Аввал	Охирин	Дастак кардан
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

<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:                 $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:          $border-color;

$table-striped-order:         odd;

$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-levelтағирёбанда равшан карда мешаванд.