Tebụl

Akwụkwọ na ihe atụ maka ịkebe ịke tebụl (nyere ha na-ejikarị na Javascript plugins) na Bootstrap.

Na ibe a

Nchịkọta

N'ihi ojiji nke ihe n'ofe wijetị ndị ọzọ dị ka kalenda na ndị na- ahọrọ<table> ụbọchị, tebụl Bootstrap abanyela . Tinye klas isi na nke ọ bụla , wee gbasaa na klas mgbanwe nhọrọ anyị ma ọ bụ ụdị omenala. A naghị eketa ụdị tebụl niile na Bootstrap, nke pụtara na enwere ike ịhazi tebụl akwụrụ ọ bụla n'adabereghị na nne ma ọ bụ nna..table<table>

N'iji akara nrịbama tebụl kachasị, nke a bụ ka .tabletebụl dabere na Bootstrap.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@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>

Ụdị dị iche iche

Jiri klaasị gburugburu mee ka tebụl, ahịrị tebụl ma ọ bụ sel dị iche iche agba agba.

Klas	Isi	Isi
Ọdabara	Cell	Cell
Isi	Cell	Cell
Secondary	Cell	Cell
Ihe ịga nke ọma	Cell	Cell
Ihe egwu	Cell	Cell
Ịdọ aka ná ntị	Cell	Cell
Ozi	Cell	Cell
Ìhè	Cell	Cell
Ọchịchịrị	Cell	Cell

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

Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hiddenklaasị.

Tebụl agbadoro anya

Ahịrị ndị dọwara adọwa

Jiri .table-stripedtinye eriri zebra na ahịrị tebụl ọ bụla n'ime <tbody>.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Ogidi ndị a kewara awawa

Jiri .table-striped-columnsịgbakwunye zebra-striping na kọlụm okpokoro ọ bụla.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Enwere ike ịgbakwunye klas ndị a na ụdị tebụl:

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Ahịrị ndị nwere ike imegharị

Tinye .table-hoveriji mee ka ọnọdụ hover na ahịrị tebụl n'ime a <tbody>.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Enwere ike ijikọ ahịrị ndị a nwere ike ịnyagharị yana ụdị ahịrị ndị nwere akara:

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Tebụl na-arụ ọrụ

Mee ka ahịrị okpokoro ma ọ bụ cell pụta ìhè site na ịgbakwunye otu .table-activeklas.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@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>

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@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>

Kedu ka ụdị dị iche iche na tebụl accented si arụ ọrụ?

Maka tebụl ndị a na-ekwusi ike ( ahịrị ndị nwere akara , ogidi ndị nwere akara , ahịrị ndị nwere ike ịgbagharị , na tebụl nọ n'ọrụ ), anyị na-eji usoro ụfọdụ mee ka mmetụta ndị a rụọ ọrụ maka ụdị tebụl anyị niile :

Anyị na-amalite site na ịtọ ndabere nke cell table na ihe --bs-table-bgonwunwe omenala. Ọdịiche dị iche iche nke tebụl wee dozie akụrụngwa omenala ahụ iji mee ka mkpụrụ ndụ tebụl dị agba. N'ụzọ dị otú a, anyị anaghị enweta nsogbu ma ọ bụrụ na-eji ọkara transperent agba dị ka okpokoro ndabere.
Mgbe ahụ, anyị na-agbakwunye inset igbe onyinyo na tebụl cell na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);oyi akwa n'elu nke ọ bụla akọwapụtara background-color. N'ihi na anyị na-eji nnukwu mgbasa na enweghị ntụpọ, agba ga-abụ monotone. Ebe ọ bụ na--bs-table-accent-bg bụ na edoghị ya na ndabara, anyị enweghị onyinyo igbe ndabara.
Mgbe agbakwunyere otu .table-striped, .table-striped-columns, .table-hoverma ọ bụ .table-activeklaasị, --bs-table-accent-bga na-edobe ya ka ọ bụrụ agba ọkara transperent iji mee ka agba dị n'azụ.
Maka ụdị tebụl ọ bụla, anyị na-emepụta --bs-table-accent-bgagba nwere ọdịiche kachasị elu dabere na agba ahụ. Dịka ọmụmaatụ, agba ụda olu maka .table-primaryna-agba ọchịchịrị ka ọ .table-darknwere agba ụda olu dị ọkụ.
A na-emepụta agba ederede na oke oke n'otu ụzọ ahụ, a na-eketakwa agba ha na ndabara.

N'azụ ihe nkiri a dị ka nke a:

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

Oke okpokoro

Tebụl gbara oke ókè

Tinye .table-borderedmaka oke n'akụkụ niile nke tebụl na sel.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Enwere ike ịgbakwunye akụrụngwa agba oke ala iji gbanwee agba :

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Tebụl na-enweghị oke

Tinye .table-borderlessmaka tebụl na-enweghị oke.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Obere tebụl

Tinye .table-smka ọ .tablebụrụ kọmpat ọzọ site n'ibibi cell niile paddingna ọkara.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Ndị na-ekewa tebụl

Tinye oke oke, gbara ọchịchịrị n'etiti otu tebụl - <thead>, <tbody>, na <tfoot>- ya na .table-group-divider. Hazie agba site n'ịgbanwe border-top-color(nke anyị anaghị enye klaasị ịba uru n'oge a).

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@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>

Nhazi kwụ ọtọ

Selụ okpokoro nke <thead>na-adakọrịrị n'ala ala. Selụ okpokoro nọ na <tbody>-eketa nhazigharị ha site <table>na ndabara na-adaba n'elu. Jiri klaasị kwụ n'ahịrị kwụ n'ahịrị ka ịhazigharịa ebe achọrọ ya.

Isi nke 1	Isi nke 2	Isi nke 3	Isi nke 4
Nke a cell ketara `vertical-align: middle;`na tebụl	Nke a cell ketara `vertical-align: middle;`na tebụl	Nke a cell ketara `vertical-align: middle;`na tebụl	Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
Nke a cell na-eketa `vertical-align: bottom;`n'ahịrị okpokoro	Nke a cell na-eketa `vertical-align: bottom;`n'ahịrị okpokoro	Nke a cell na-eketa `vertical-align: bottom;`n'ahịrị okpokoro	Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
Nke a cell ketara `vertical-align: middle;`na tebụl	Nke a cell ketara `vertical-align: middle;`na tebụl	A kwadoro cell a n'elu.	Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.

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

Akwu

Ụdị oke ala, ụdị na-arụsi ọrụ ike, na ụdị tebụl anaghị eketa site na tebụl akwụ ụgwọ.

Mbụ

Ikpeazụ

Jikwaa

Mark

Otto

@mdo

nkụnye eji isi mee	nkụnye eji isi mee	nkụnye eji isi mee
A	Mbụ	Ikpeazụ
B	Mbụ	Ikpeazụ
C	Mbụ	Ikpeazụ

Larry

Nnụnụ ahụ

@twitter

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

Kedu ka akwụ ụgwọ si arụ ọrụ

Iji gbochie ụdị ọ bụla ịdaba na tebụl akwụkwụ, anyị na-eji ihe nchịkọta ụmụaka ( >) na CSS anyị. Ebe ọ bụ na anyị kwesịrị ilekwasị anya na tds na ths niile dị na thead, tbody, na tfoot, onye nhọpụta anyị ga-adị ogologo ogologo na-enweghị ya. Dị ka nke a, anyị na-eji onye .table > :not(caption) > * > *nhọpụta na-ele anya na-adịghị ahụkebe iji gbado tds na ths niile nke ndị.table , mana ọ nweghị tebụl ọ bụla nwere ike ime.

Rịba ama na ọ bụrụ na ị gbakwunye <tr>s dị ka ụmụaka kpọmkwem nke tebụl, a <tr>ga-ekekọta <tbody>ndị ahụ na ndabara, si otú a na-eme ka ndị na-ahọrọ anyị rụọ ọrụ dịka e bu n'obi.

Anatomi

Isi tebụl

Yiri tebụl na tebụl gbara ọchịchịrị, jiri klaasị modifier .table-lightma ọ bụ .table-darkmee ka <thead>s yie ìhè ma ọ bụ isi awọ gbara ọchịchịrị.

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry	Nnụnụ ahụ	@twitter

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

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry	Nnụnụ ahụ	@twitter

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

Ụkwụ okpokoro

#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry	Nnụnụ ahụ	@twitter
Onye n'okpuru	Onye n'okpuru	Onye n'okpuru	Onye n'okpuru

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

Nkọwa okwu

A <caption>na-arụ ọrụ dị ka isi maka tebụl. Ọ na-enyere ndị ọrụ na ndị na-agụ ihuenyo aka ịchọta tebụl ma ghọta ihe ọ bụ ma kpebie ma ha chọrọ ịgụ ya.

Ndepụta ndị ọrụ
#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry The Bird		@twitter

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

Ị nwekwara ike tinye <caption>n'elu tebụl na .caption-top.

Ndepụta ndị ọrụ
#	Mbụ	Ikpeazụ	Jikwaa
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry	Nnụnụ ahụ	@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>

Tebụl na-anabata

Tebụl ndị na-anabata ihe na-enye ohere ka a pịgharịa tebụl n'ahịrị n'ụzọ dị mfe. Mee ka tebụl ọ bụla na-anabata n'ofe ebe nlele niile site na .tableiji .table-responsive. Ma ọ bụ, họrọ ebe nkwụsịtụ kacha nke ị ga-eji nwee tebụl na-anabata ya site na iji .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Mkpọchi/ mkpọtu kwụ ọtọ

Tebụl na-anabata ihe na-eji overflow-y: hidden, nke na-ewepụ ọdịnaya ọ bụla na-agafe n'akụkụ ala ma ọ bụ elu nke tebụl. Karịsịa, nke a nwere ike ihichapụ menus dropdown na wijetị ndị ọzọ.

Na-anabata mgbe niile

N'ofe ebe nkwụsịtụ ọ bụla, jiri .table-responsivemaka tebụl mpịakọta kwụ ọtọ.

#	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint kpọmkwem

Jiri .table-responsive{-sm|-md|-lg|-xl|-xxl}dị ka ọ dị mkpa iji mepụta tebụl na-anabata ihe ruo otu ebe nkwụsịtụ. Site n'ebe nkwụsịtụ ahụ na elu, tebụl ga-akpa àgwà ka ọ na-adịghị pịgharịa na kehoraizin.

Tebụl ndị a nwere ike ịdị ka agbajiri agbaji ruo mgbe ụdị anabatara ha na-emetụta na obosara ihe nlele.

#	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Isi	Isi	Isi	Isi	Isi	Isi	Isi	Isi
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<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

Mgbanwe

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

Loop

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

Nhazi

Ụdị ihe dị iche iche ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) iji chọpụta ọdịiche dị na ụdị tebụl.
Ewezuga ìhè & ụdị tebụl gbara ọchịchịrị, agba agba agba agba agba agba agba agba agba $table-bg-scale.