in English

Iitafile

Amaxwebhu kunye nemizekelo yokukhetha ukungena kwisitayile seetafile (kunikwe usetyenziso oluxhaphakileyo kwiiplagi zeJavaScript) ngeBootstrap.

Kweli phepha

Isishwankathelo

Ngenxa yokusetyenziswa ngokubanzi kwezinto kwiiwijethi zomntu <table>wesithathu ezifana neekhalenda kunye nabakhi bomhla, iitafile zeBootstrap zingenile . Yongeza iklasi yesiseko .tablenakweyiphi na <table>, emva koko wandise ngeeklasi zethu ozikhethayo zesilungisi okanye izimbo zesiko. Zonke izitayile zetafile azifumaneki njengelifa kwi-Bootstrap, okuthetha ukuba naziphi na iitafile ezibekwe kwindlwane zinokubhalwa ngokuzimeleyo kumzali.

Usebenzisa olona phawu lusisiseko lwetafile, nantsi indlela-esekwe njani .tableiitafile kwiBootstrap.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@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>

Ukwahluka

Sebenzisa iiklasi zomxholo ukufaka imibala kwiitheyibhile, iirowu zetafile okanye iiseli ezizimeleyo.

Iklasi	Isihloko	Isihloko
Ukuhlala kukho	Iseli	Iseli
Amabanga aphantsi	Iseli	Iseli
Eyesibini	Iseli	Iseli
Impumelelo	Iseli	Iseli
Ingozi	Iseli	Iseli
Isilumkiso	Iseli	Iseli
Ulwazi	Iseli	Iseli
Ukukhanya	Iseli	Iseli
Mnyama	Iseli	Iseli

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

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Iitafile ezine-accented

Imiqolo enemigca

Sebenzisa .table-stripedukudibanisa zebra-striping kuwo nawuphi na umqolo wetafile ngaphakathi kwe <tbody>.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Iintsika ezinemigca

Sebenzisa .table-striped-columnsukudibanisa zebra-striping kuyo nayiphi na ikholamu yetafile.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Ezi klasi zinokongezwa kwiintlobo ezahlukeneyo zetafile:

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Imiqolo eshukumayo

Yongeza .table-hoverukwenza imo ye hover kwimigca yetafile ngaphakathi kwe <tbody>.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Le miqolo ishukumayo inokudityaniswa nokwahluka kwemiqolo enemigca:

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Iitafile ezisebenzayo

Phawula umqolo wetafile okanye iseli ngokudibanisa .table-activeiklasi.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@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>

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@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>

Zisebenza njani iinguqu kunye neetafile ezine-accented?

Kwiitafile ezinemigca yonyuso ( imigca enemigca , iikholamu ezinemigca , iirowu ezishukumayo , kunye neetafile ezisebenzayo ), sisebenzise ubuchule obuthile ukwenza ezi ziphumo zisebenze kuzo zonke iintlobo ezahlukeneyo zetafile :

Siqala ngokucwangcisa imvelaphi yeseli yetafile kunye --bs-table-bgnepropati yesiko. Zonke iinguqulelo zetafile ziseta loo mpahla yesiko ukwenza umbala kwiiseli zetafile. Ngale ndlela, asiyi kungena engxakini ukuba imibala engafihliyo isetyenziswa njengemvelaphi yetafile.
Emva koko songeza isithunzi sebhokisi ye-inset kwiiseli zetafile box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ngokumaleko ngaphezulu kwayo nayiphi na into echaziweyo background-color. Ngenxa yokuba sisebenzisa ukusasazeka okukhulu kwaye akukho mfifi, umbala uya kuba yi-monotone. Kuba --bs-table-accent-bgayimiselwanga ngokwendalo, asinaso isithunzi sebhokisi esihlala sihleli.
Xa enye .table-striped, .table-striped-columns, .table-hoverokanye .table-activeiiklasi zidityanisiwe, i --bs-table-accent-bgicwangciswe kumbala ongabonakali kakuhle ukwenza umbala ongasemva.
Ngokwahluka kwetafile nganye, sivelisa --bs-table-accent-bgumbala onowona mahluko uphezulu ngokuxhomekeke kuloo mbala. Umzekelo, umbala we-accent kuba .table-primarymnyama ngelixa .table-darkunombala we-accent ekhaphukhaphu.
Umbhalo kunye nemibala yemida iveliswa ngendlela efanayo, kwaye imibala yazo izuzwe ngokungagqibekanga.

Emva kwemifanekiso ibonakala ngolu hlobo:

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

Imida yetafile

Iitafile ezinemida

Yongeza .table-borderedimida kumacala onke etafile kunye neeseli.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Izinto eziluncedo zombala womda zingongezwa ukutshintsha imibala:

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Iitafile ezingenamida

Yongeza .table-borderlessitafile ngaphandle kwemida.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Iitafile ezincinci

Yongeza .table-smukwenza nayiphi na .tablei-compact ngokusika yonke iseli paddingphakathi.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Izahluli zamaqela etafile

Yongeza umda ongqindilili, omnyama phakathi kwamaqela etafile— <thead>, <tbody>, kunye <tfoot>— nge .table-group-divider. Lungiselela umbala ngokutshintsha border-top-color(esingaboneleli ngoku ngeklasi eluncedo ngeli xesha).

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@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>

Ulungelelwaniso oluthe nkqo

Iiseli zetheyibhile <thead>zisoloko zithe nkqo zilungelelaniswe emazantsi. Iiseli <tbody>zetheyibhile kulungelelwaniso lwazo ukusuka <table>kwaye zilungelelaniswe phezulu ngokungagqibekanga. Sebenzisa iiklasi zokulungelelanisa ngokuthe nkqo ukulungelelanisa kwakhona apho kuyimfuneko.

Isihloko 1	Isihloko 2	Isihloko 3	Isihloko 4
Le seli ifumana ilifa `vertical-align: middle;`etafileni	Le seli ifumana ilifa `vertical-align: middle;`etafileni	Le seli ifumana ilifa `vertical-align: middle;`etafileni	Oku nantsi enye isicatshulwa sesibambi-ndawo, esijonge ukuthatha indawo ethe nkqo kakhulu, ukubonisa indlela ulungelelwaniso oluthe nkqo lusebenza ngayo kwiiseli ezandulelayo.
Le seli ifumana ilifa `vertical-align: bottom;`kumqolo wetafile	Le seli ifumana ilifa `vertical-align: bottom;`kumqolo wetafile	Le seli ifumana ilifa `vertical-align: bottom;`kumqolo wetafile	Oku nantsi enye isicatshulwa sesibambi-ndawo, esijonge ukuthatha indawo ethe nkqo kakhulu, ukubonisa indlela ulungelelwaniso oluthe nkqo lusebenza ngayo kwiiseli ezandulelayo.
Le seli ifumana ilifa `vertical-align: middle;`etafileni	Le seli ifumana ilifa `vertical-align: middle;`etafileni	Le seli ilungelelaniswe phezulu.	Oku nantsi enye isicatshulwa sesibambi-ndawo, esijonge ukuthatha indawo ethe nkqo kakhulu, ukubonisa indlela ulungelelwaniso oluthe nkqo lusebenza ngayo kwiiseli ezandulelayo.

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

Ukuzalela

Izimbo zomda, izimbo ezisebenzayo, kunye nokwahluka kwetafile azizuzwwa njengeetafile ezibekwe kwindlwane.

Ekuqaleni

Okokugqibela

Phatha

Phawula

Otto

@mdo

Okubhalwe ngasentla kwekhasi	Okubhalwe ngasentla kwekhasi	Okubhalwe ngasentla kwekhasi
A	Ekuqaleni	Okokugqibela
B	Ekuqaleni	Okokugqibela
C	Ekuqaleni	Okokugqibela

Larry

intaka

@twitter

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

Isebenza njani indlwane

Ukuthintela naziphi na izimbo ekuvuzeni iitafile ezibekwe kwindlwane, sisebenzisa isihlanganisi somntwana ( >) umkhethi kwiCSS yethu. Kuba kufuneka sijolise kuzo zonke ii- tds kunye no th-s kwi- thead, tbody, kunye tfoot, umkhethi wethu angajongeka ixesha elide ngaphandle kwayo. Ngokunjalo, sisebenzisa .table > :not(caption) > * > *umkhethi ojongeka ngendlela engaqhelekanga ukujolisa zonke tdii-s kunye thne- .table, kodwa akukho nanye kuzo naziphi iitafile ezinokubakho.

Qaphela ukuba udibanisa <tr>s njengabantwana ngqo kwitafile, abo <tr>baya kusongelwa <tbody>ngokungagqibekanga, ngaloo ndlela ukwenza abakhethi bethu basebenze njengoko bekucetywa.

I-Anatomy

Intloko yetafile

Ngokufana neetafile kunye neetafile ezimnyama, sebenzisa iiklasi zesilungisi .table-lightokanye .table-darkukwenza <thead>s kubonakale ukukhanya okanye grey emnyama.

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter

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

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter

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

Unyawo lwetafile

#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@twitter
Umbhalo osemazantsi	Umbhalo osemazantsi	Umbhalo osemazantsi	Umbhalo osemazantsi

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

Iinkcazelo

Imisebenzi <caption>efana nesihloko setafile. Inceda abasebenzisi abafunda isikrini ukuba bafumane itafile kwaye baqonde ukuba ingantoni kwaye bathathe isigqibo sokuba bafuna ukuyifunda na.

Uluhlu lwabasebenzisi
#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry intaka		@twitter

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

Unako kwakhona ukubeka <caption>phezu kwetafile nge .caption-top.

Uluhlu lwabasebenzisi
#	Ekuqaleni	Okokugqibela	Phatha
1	Phawula	Otto	@mdo
2	uYakobi	Thornton	@fat
3	Larry	intaka	@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>

Iitafile eziphendulayo

Iitheyibhile eziphendulayo zivumela iitafile ukuba ziskrolwe ngokuthe tye ngokulula. Yenza nayiphi na itafile iphendule kuzo zonke iindawo zokujonga ngokusonga .tablenge .table-responsive. Okanye, khetha eyona ndawo iphezulu onokuthi ube netafile ephendulayo ukuya kuthi ga ngoku .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Ukunqunyulwa ngokuthe nkqo/ukunciphisa

Iitheyibhile eziphendulayo zisebenzisa overflow-y: hiddeni-, ekhuphela nawuphi na umxholo ongaphaya komzantsi okanye kumphetho wetafile. Ngokukodwa, oku kunokuqhawula iimenyu ezihlayo kunye nezinye iiwijethi zomntu wesithathu.

Isoloko iphendula

Kuzo zonke iindawo zokuphumla, sebenzisa .table-responsiveiitafile zokuskrola ngokuthe tye.

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

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

Breakpoint ethile

Sebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}njengoko kufuneka ukwenza iitafile eziphendulayo ukuya kwindawo ethile yoqhawulo. Ukusuka kuloo ndawo yokuqhekeka ukuya phezulu, itafile iya kuziphatha ngokwesiqhelo kwaye ingasondeli ngokuthe tye.

Ezi theyibhile zinokubonakala zaphukile de izimbo zazo zokuphendula zisebenze kububanzi obuthile bendawo yokujonga.

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

<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

Izinto eziguquguqukayo

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

Umjikelo

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

Ukwenza ngokwezifiso

Izinto eziguquguqukayo ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) zisetyenziselwa ukumisela umahluko kwiintlobo ezahlukeneyo zetafile.
Ngaphandle kokukhanya kunye nokwahluka kwetafile emnyama, imibala yomxholo ikhanyiswa $table-bg-scalekukuguquguquka.