in English

Majedwali

Nyaraka na mifano ya kuchagua kuingia kwa mtindo wa jedwali (kwa kuzingatia matumizi yao ya kawaida katika programu jalizi za JavaScript) na Bootstrap.

Katika ukurasa huu

Muhtasari

Kwa sababu ya kuenea kwa matumizi ya <table>vipengee kwenye wijeti za watu wengine kama vile kalenda na vichagua tarehe, majedwali ya Bootstrap ni ya kuchagua kuingia . Ongeza darasa la msingi .tablekwa any <table>, kisha upanue na madarasa yetu ya hiari ya kurekebisha au mitindo maalum. Mitindo yote ya jedwali haijarithiwa katika Bootstrap, kumaanisha kuwa jedwali zozote zilizowekwa kwenye kiota zinaweza kutengenezwa bila mpangilio kutoka kwa mzazi.

Kwa kutumia lebo ya msingi zaidi ya jedwali, hivi ndivyo .tablemajedwali-msingi yanavyoonekana kwenye Bootstrap.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@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>

Lahaja

Tumia madarasa ya muktadha kwa majedwali ya rangi, safu mlalo za jedwali au seli mahususi.

Darasa	Kichwa	Kichwa
Chaguomsingi	Kiini	Kiini
Msingi	Kiini	Kiini
Sekondari	Kiini	Kiini
Mafanikio	Kiini	Kiini
Hatari	Kiini	Kiini
Onyo	Kiini	Kiini
Habari	Kiini	Kiini
Mwanga	Kiini	Kiini
Giza	Kiini	Kiini

<!-- 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>

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hiddendarasa.

Jedwali zenye lafudhi

Safu zenye mistari

Tumia .table-stripedkuongeza zebra-striping kwenye safu mlalo yoyote ya jedwali ndani ya <tbody>.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Safu wima zenye mistari

Tumia .table-striped-columnskuongeza zebra-striping kwenye safu wima yoyote ya jedwali.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Madarasa haya pia yanaweza kuongezwa kwa anuwai za jedwali:

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Safu zinazoweza kusongeshwa

Ongeza .table-hoverili kuwezesha hali ya kuelea kwenye safu mlalo za jedwali ndani ya <tbody>.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Safu hizi zinazoweza kusongeshwa zinaweza pia kuunganishwa na lahaja ya safu zenye mistari:

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Meza zinazotumika

Angazia safu mlalo ya jedwali au kisanduku kwa kuongeza .table-activedarasa.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@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>

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@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>

Je, lahaja na jedwali zenye lafudhi hufanyaje kazi?

Kwa majedwali yenye lafudhi ( safu mlalo yenye milia , safu wima zenye mistari , safu mlalo zinazoweza kuelea , na jedwali zinazotumika ), tulitumia baadhi ya mbinu kufanya athari hizi zifanye kazi kwa anuwai zetu zote za jedwali :

Tunaanza kwa kuweka usuli wa seli ya jedwali na --bs-table-bgmali maalum. Vibadala vyote vya jedwali kisha weka sifa hiyo maalum ili kupaka rangi seli za jedwali. Kwa njia hii, hatutaingia kwenye matatizo ikiwa rangi zisizo na uwazi zitatumika kama mandharinyuma ya jedwali.
Kisha tunaongeza kivuli cha kisanduku cha kuingiza kwenye seli za jedwali na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);kuweka safu juu ya yoyote iliyobainishwa background-color. Kwa sababu tunatumia uenezi mkubwa na hakuna ukungu, rangi itakuwa monotone. Kwa kuwa --bs-table-accent-bghaijawekwa kwa chaguo-msingi, hatuna kivuli cha kisanduku chaguo-msingi.
Wakati aidha .table-striped, .table-striped-columns, .table-hoverau .table-activemadarasa yameongezwa, --bs-table-accent-bghuwekwa kwa rangi isiyo na uwazi ili kupaka mandharinyuma.
Kwa kila lahaja ya jedwali, tunatoa --bs-table-accent-bgrangi yenye utofauti wa juu zaidi kulingana na rangi hiyo. Kwa mfano, rangi ya lafudhi .table-primaryni nyeusi zaidi wakati .table-darkina rangi nyepesi ya lafudhi.
Nakala na rangi za mpaka zinazalishwa kwa njia ile ile, na rangi zao hurithiwa kwa chaguo-msingi.

Nyuma ya pazia inaonekana kama hii:

@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);
  }
}

Mipaka ya meza

Meza za mipaka

Ongeza .table-borderedkwa mipaka pande zote za jedwali na seli.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Huduma za rangi ya mpaka zinaweza kuongezwa ili kubadilisha rangi:

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Jedwali bila mipaka

Ongeza .table-borderlesskwa meza bila mipaka.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Meza ndogo

Ongeza .table-smili kushikana .tablezaidi kwa kukata seli zote paddingkatikati.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Wagawanyaji wa vikundi vya jedwali

Ongeza mpaka mzito, mweusi zaidi kati ya vikundi vya jedwali— <thead>, <tbody>, na <tfoot>—na .table-group-divider. Geuza rangi kukufaa kwa kubadilisha border-top-color(ambayo kwa sasa hatutoi darasa la matumizi kwa wakati huu).

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@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>

Mpangilio wa wima

Seli za jedwali za <thead>kila mara hupangiliwa wima hadi chini. Seli za jedwali katika <tbody>hurithi upangaji wao kutoka <table>na hupangwa hadi juu kwa chaguo-msingi. Tumia madarasa ya kupanga wima ili kupanga upya inapohitajika.

Kichwa 1	Kichwa cha 2	Kichwa cha 3	Kichwa cha 4
Seli hii hurithi `vertical-align: middle;`kutoka kwa jedwali	Seli hii hurithi `vertical-align: middle;`kutoka kwa jedwali	Seli hii hurithi `vertical-align: middle;`kutoka kwa jedwali	Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
Seli hii hurithi `vertical-align: bottom;`kutoka kwa safu mlalo ya jedwali	Seli hii hurithi `vertical-align: bottom;`kutoka kwa safu mlalo ya jedwali	Seli hii hurithi `vertical-align: bottom;`kutoka kwa safu mlalo ya jedwali	Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
Seli hii hurithi `vertical-align: middle;`kutoka kwa jedwali	Seli hii hurithi `vertical-align: middle;`kutoka kwa jedwali	Seli hii imepangwa hadi juu.	Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.

<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>

Nesting

Mitindo ya mipaka, mitindo inayotumika, na anuwai za jedwali hazirithiwi na majedwali yaliyowekwa.

Kwanza

Mwisho

Kushughulikia

Weka alama

Otto

@mdo

Kijajuu	Kijajuu	Kijajuu
A	Kwanza	Mwisho
B	Kwanza	Mwisho
C	Kwanza	Mwisho

Larry

ndege

@twitter

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

Jinsi kiota kinavyofanya kazi

Ili kuzuia mitindo yoyote isivuje hadi kwa majedwali yaliyowekwa, tunatumia >kichaguzi cha mtoto ( ) katika CSS yetu. Kwa kuwa tunahitaji kulenga tds na ths zote kwenye thead, tbody, na tfoot, kiteuzi chetu kitaonekana kirefu sana bila hiyo. Kwa hivyo, tunatumia kiteuzi cha sura isiyo ya kawaida .table > :not(caption) > * > *kulenga tds na ths zote za.table , lakini hakuna jedwali zozote zinazowezekana.

Kumbuka kuwa ukiongeza <tr>s kama watoto wa moja kwa moja wa jedwali, hizo <tr>zitafungwa <tbody>kwa chaguo-msingi, na hivyo kufanya wateuzi wetu kufanya kazi kama ilivyokusudiwa.

Anatomia

Kichwa cha meza

Sawa na majedwali na majedwali meusi, tumia madarasa ya kurekebisha .table-lightau .table-darkkufanya <thead>s ionekane nyepesi au kijivu iliyokolea.

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

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

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

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

Mguu wa meza

#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter
Kijachini	Kijachini	Kijachini	Kijachini

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

Manukuu

Hufanya <caption>kazi kama kichwa cha jedwali. Husaidia watumiaji walio na visoma skrini kupata jedwali na kuelewa inahusu nini na kuamua kama wanataka kuisoma.

Orodha ya watumiaji
#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

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

Unaweza pia kuweka <caption>juu ya meza na .caption-top.

Orodha ya watumiaji
#	Kwanza	Mwisho	Kushughulikia
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@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>

Majedwali ya mwitikio

Majedwali jibu huruhusu jedwali kusongeshwa kwa mlalo kwa urahisi. Fanya jedwali lolote lijisikie kwenye tovuti zote za kutazama kwa kufunga .tablena .table-responsive. Au, chagua kikomo cha juu zaidi ambacho unaweza kuwa na jedwali la kuitikia hadi kwa kutumia .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Ukataji/upunguzaji wima

Majedwali jibu hutumia overflow-y: hidden, ambayo huondoa maudhui yoyote ambayo huenda zaidi ya kingo za chini au za juu za jedwali. Hasa, hii inaweza kupunguza menyu kunjuzi na wijeti zingine za wahusika wengine.

Daima msikivu

Katika kila sehemu ya kukatiza, tumia .table-responsivekwa majedwali ya kusogeza kwa mlalo.

#	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa
1	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
2	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
3	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini

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

Breakpoint maalum

Tumia .table-responsive{-sm|-md|-lg|-xl|-xxl}inavyohitajika ili kuunda majedwali jibu hadi sehemu fulani ya kukanusha. Kutoka kwa sehemu hiyo na juu, jedwali litafanya kazi kama kawaida na sio kusogea kwa usawa.

Majedwali haya yanaweza kuonekana yamevunjwa hadi mitindo yao ya kuitikia itumike katika upana mahususi wa kituo cha kutazama.

#	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa
1	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
2	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
3	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini

#	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa
1	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
2	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
3	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini

#	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa
1	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
2	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
3	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini

#	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa
1	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
2	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
3	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini

#	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa
1	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
2	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
3	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini

#	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa	Kichwa
1	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
2	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini
3	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini	Kiini

<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>

Sass

Vigezo

$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%;

Kitanzi

$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,
);

Kubinafsisha

Vigezo vya sababu ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) hutumika kubainisha utofautishaji katika vibadala vya jedwali.
Kando na vibadala vya jedwali jeusi na jeusi, rangi za mandhari hurahisishwa na $table-bg-scaleutofauti.