Amathebula

Amadokhumenti nezibonelo zokukhetha ukungena kwisitayela samathebula (uma kubhekwa ukusetshenziswa kwawo okuvame kakhulu kuma-plugin e-JavaScript) nge-Bootstrap.

Kuleli khasi

Uhlolojikelele

Ngenxa yokusetshenziswa okubanzi kwezinto kuwo wonke amawijethi ezinkampani<table> zangaphandle njengamakhalenda nezikhethi zezinsuku, amathebula e-Bootstrap asengenile . Engeza ikilasi lesisekelo kunoma iyiphi , bese unweba ngamakilasi ethu okushintsha noma izitayela zangokwezifiso. Zonke izitayela zethebula azizuzwa njengefa ku-Bootstrap, okusho ukuthi noma yimaphi amathebula afakwe esidlekeni angenziwa isitayela ngaphandle komzali..table<table>

Usebenzisa imakhaphu yethebula eyisisekelo, nansi indlela .tableamathebula asekelwe ngayo abukeka ngayo ku-Bootstrap.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

Okuhlukile

Sebenzisa amakilasi anomongo ukuze ufake imibala kumathebula, imigqa yethebula noma amaseli ngamanye.

Ikilasi	Isihloko	Isihloko
Okuzenzakalelayo	Iseli	Iseli
Okuyinhloko	Iseli	Iseli
Okwesibili	Iseli	Iseli
Impumelelo	Iseli	Iseli
Ingozi	Iseli	Iseli
Isexwayiso	Iseli	Iseli
Ulwazi	Iseli	Iseli
Ukukhanya	Iseli	Iseli
Kumnyama	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>

Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .visually-hiddennekilasi.

Amathebula ane-accent

Imigqa enemigqa

Sebenzisa .table-stripedukwengeza i-zebra-striping kunoma yimuphi umugqa wethebula ngaphakathi kwe- <tbody>.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Amakholomu anemigqa

Sebenzisa .table-striped-columnsukwengeza idube-striping kunoma iyiphi ikholomu yethebula.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Lawa makilasi angaphinda angezwe kokuhlukile kwethebula:

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Imigqa enyakazayo

Engeza .table-hoverukuze unike amandla isimo sokuhambisa phezulu emigqeni yethebula ngaphakathi kwe- <tbody>.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Le migqa enyakazayo ingabuye ihlanganiswe nokuhluka kwemigqa enemigqa:

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Amathebula asebenzayo

Gqamisa umugqa wethebula noma iseli ngokungeza .table-activeiklasi.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

Asebenza kanjani okuhlukile namathebula anezimpawu zokugcizelela?

Kumathebula agxiviziwe ( imigqa enemigqa , amakholomu anemigqa , imigqa enyakazayo , namathebula asebenzayo ), sisebenzise amasu athile ukuze senze le miphumela isebenze kukho konke okuhlukile kwethebula lethu :

Siqala ngokusetha ingemuva leseli letafula elinempahla --bs-table-bgyangokwezifiso. Zonke izinhlobo zethebula zibe sezisetha leyo mpahla yangokwezifiso ukuze ifake umbala kumaseli ethebula. Ngale ndlela, asingeni enkingeni uma imibala ebonisa ngale isetshenziswa njengengemuva letafula.
Bese sengeza isithunzi sebhokisi le-inset kumaseli ethebula box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ukuze senze isendlalelo phezu kwanoma iyiphi eshiwo background-color. Ngoba sisebenzisa ukusabalala okukhulu futhi akukho ukufiphala, umbala uzoba monotone. Njengoba --bs-table-accent-bgingasethiwe ngokuzenzakalelayo, asinaso isithunzi sebhokisi esizenzakalelayo.
Uma .table-striped, .table-striped-columns, .table-hovernoma .table-activeamakilasi engezwa, --bs-table-accent-bgisethi isethwe kumbala okhanye kancane ukuze yenze umbala ingemuva.
Ngokwahluka kwethebula ngalinye, sikhiqiza --bs-table-accent-bgumbala onokugqama okuphezulu kakhulu kuye ngalowo mbala. Isibonelo, umbala we-accent yawo .table-primaryumnyama ngenkathi .table-darkunombala we-accent okhanyayo.
Imibala yombhalo neyomngcele ikhiqizwa ngendlela efanayo, futhi imibala yayo izuzwa ngokuzenzakalelayo.

Ngemuva kwezigcawu kubonakala kanje:

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

Imingcele yethebula

Amatafula anemingcele

Engeza .table-borderedimingcele kuzo zonke izinhlangothi zetafula namaseli.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Izinsiza zombala womngcele zingangezwa ukushintsha imibala:

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Amathebula angenayo imingcele

Engeza .table-borderlesskutafula elingenayo imingcele.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Amatafula amancane

Engeza .table-smukuze wenze noma iyiphi .tablei-compact kakhudlwana ngokusika wonke amaseli paddingphakathi.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Abahlukanisi bamaqembu ethebula

Engeza umngcele omkhulu, omnyama phakathi kwamaqembu ethebula— <thead>, <tbody>, kanye <tfoot>—kanye .table-group-divider. Enza ngendlela oyifisayo umbala ngokushintsha border-top-color(okungasihlinzeki okwamanje ngesigaba sosizo ngalesi sikhathi).

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

Ukuqondanisa okuqondile

Amaseli ethebula <thead>okuthi ahlala eqondaniswe mpo phansi. Amaseli ethebula <tbody>athola ukuqondana kwawo kusuka <table>futhi aqondaniswe phezulu ngokuzenzakalela. Sebenzisa amakilasi okuqondanisa mpo ukuze uhlele kabusha lapho kudingeka.

Isihloko 1	Isihloko 2	Isihloko 3	Isihloko 4
Leli seli lithola ifa `vertical-align: middle;`kusuka etafuleni	Leli seli lithola ifa `vertical-align: middle;`kusuka etafuleni	Leli seli lithola ifa `vertical-align: middle;`kusuka etafuleni	Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
Leli seli lizuza `vertical-align: bottom;`kumugqa wethebula	Leli seli lizuza `vertical-align: bottom;`kumugqa wethebula	Leli seli lizuza `vertical-align: bottom;`kumugqa wethebula	Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
Leli seli lithola ifa `vertical-align: middle;`kusuka etafuleni	Leli seli lithola ifa `vertical-align: middle;`kusuka etafuleni	Leli seli liqondaniswe phezulu.	Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.

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

Ukwenza isidleke

Izitayela zemingcele, izitayela ezisebenzayo, nokuhluka kwethebula akuzuzwa njengefa ngamathebula akhiwe.

Okokuqala

Okokugcina

Bamba

Maka

Otto

@mdo

Unhlokweni	Unhlokweni	Unhlokweni
A	Okokuqala	Okokugcina
B	Okokuqala	Okokugcina
C	Okokuqala	Okokugcina

Larry

uNyoni

@twitter

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

Indlela yokwenza isidleke isebenza kanjani

Ukuvimbela noma yiziphi izitayela ukuthi zingavuzi ziye kumathebula afakwe esidlekeni, sisebenzisa isikhethi sezingane ( >) ku-CSS yethu. Njengoba sidinga ukukhomba wonke u- tds no - ths ku- thead, tbody, kanye tfoot, isikhethi sethu singabukeka siside kakhulu ngaphandle kwayo. Kanjalo, sisebenzisa .table > :not(caption) > * > *isikhethi esibukeka ngendlela exakile ukuze siqondise wonke amathebula e- td, kodwa awekho amathebula akhiwe esidlekeni.th.table

Qaphela ukuthi uma ungeza <tr>u-s njengabantwana abaqondile betafula, labo <tr>bazogoqwa ngokuthi a <tbody>ngokuzenzakalela, ngaleyo ndlela benze abakhethi bethu basebenze ngendlela ehlosiwe.

I-Anatomy

Ikhanda letafula

Ngokufana namathebula namathebula amnyama, sebenzisa amakilasi okulungisa .table-lightnoma .table-darkukwenza u- <thead>s abonakale ekhanyayo noma empunga emnyama.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter

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

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter

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

Unyawo lwetafula

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter
Unyaweni	Unyaweni	Unyaweni	Unyaweni

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

Amazwibela

Isebenza <caption>njengesihloko setafula. Isiza abasebenzisi abanezifundi zesikrini ukuthi bathole ithebula futhi baqonde ukuthi limayelana nani futhi banqume ukuthi bafuna ukulifunda yini.

Uhlu lwabasebenzisi
#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@twitter

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

Ungakwazi futhi ukubeka <caption>phezu kwetafula nge .caption-top.

Uhlu lwabasebenzisi
#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@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>

Amathebula asabelayo

Amathebula aphendulayo avumela amathebula ukuthi asongwe ngokuvundlile kalula. Yenza noma yiliphi ithebula liphendule kuzo zonke izinkundla zokubuka ngokusonga .tablengokuthi .table-responsive. Noma, khetha indawo enkulu yokunqamula lapho ungathola khona ithebula eliphendulayo ngokusebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Ukusika okuqondile/ukunciphisa

Amathebula aphendulayo asebenzisa overflow-y: hiddenokuthi , okusika noma yikuphi okuqukethwe okudlulela ngale kwangaphansi noma imiphetho ephezulu yethebula. Ikakhulukazi, lokhu kunganqamula amamenyu okwehlayo namanye amawijethi ezinkampani zangaphandle.

Ihlale iphendula

Kuwo wonke ama-breakpoint, sebenzisa .table-responsiveamathebula okuskrola avundlile.

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

I-Breakpoint ethize

Sebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}njengoba kudingeka ukuze udale amathebula asabelayo kuze kufike endaweni ethile yokuhlukana. Kusukela kuleyo ndawo yokuhlukana kuya phezulu, ithebula lizoziphatha ngendlela evamile futhi lingaskroli ngokuvundlile.

Lawa mathebula angase abonakale ephukile kuze kube yilapho izitayela zawo zokusabela zisebenza kububanzi obuthile bokubuka.

#	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

Okuguquguqukayo

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

Iluphu

$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

I-factor variables ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) isetshenziselwa ukunquma umehluko ezinhlobonhlobo zethebula.
Ngaphandle kokwehluka kwethebula elikhanyayo nelimnyama, imibala yetimu ikhanyiswa ukuhlukahluka $table-bg-scale.