Matafula

Matsalwa na swikombiso swa ku hlawula ku endla xitayili xa matafula (hi ku nyikiwa ku tirhisiwa ka wona loku tolovelekeke eka ti-plugin ta JavaScript) na Bootstrap.

Eka tluka leri

Nkatsakanyo

Hikwalaho ka ku tirhisiwa lokukulu ka <table>swiaki eka switirhisiwa swa vanhu va vunharhu ku fana na tikhalendara na vahlawuri va masiku, matafula ya Bootstrap i ku hlawula ku nghena . Engetelani tlilasi ya le hansi .tableeka yin’wana ni yin’wana <table>, kutani u andlala hi titlilasi ta hina ta mucinci leti nga hlawuriki kumbe switayele swa ntolovelo. Switayili hinkwaswo swa matafula a swi dyi ndzhaka eka Bootstrap, leswi vulaka leswaku matafula wahi na wahi lama pfanganisiweke ya nga endliwa xitayili hi yoxe eka mutswari.

Hi ku tirhisa xikombiso xa tafula xa xisekelo swinene, hi leyi ndlela leyi .tablematafula lama simekiweke eka -based ma langutekaka ha yona eka Bootstrap.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@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>

Swihlawulekisi swa swilo

Tirhisa titlilasi ta mongo ku penda matafula, tilayini ta tafula kumbe tisele ha yin’we.

Tlilasi	Nhlokomhaka	Nhlokomhaka
Ku tlula	Sele	Sele
Phurayimari	Sele	Sele
Xikolo xa vumbirhi	Sele	Sele
Humelela	Sele	Sele
Nghozi	Sele	Sele
Xilemukisi	Sele	Sele
Info	Sele	Sele
Rivoni	Sele	Sele
Xinyama	Sele	Sele

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

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.

Matafula lama nga ni switlhokovetselo

Tilayini leti nga ni mitila

Tirhisa .table-stripedku engetela zebra-striping eka layini yihi na yihi ya tafula endzeni ka <tbody>.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Tikholomu leti nga ni mitila

Tirhisa .table-striped-columnsku engetela zebra-striping eka kholomo yin’wana na yin’wana ya tafula.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Titlilasi leti ti nga tlhela ti engeteriwa eka tinxaka ta tafula:

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Tilayini leti nga hoverable

Engetela .table-hoverku endla leswaku xiyimo xa hover xi tirha eka tilayini ta tafula endzeni ka <tbody>.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Tilayini leti ti hoverable ti nga tlhela ti hlanganisiwa na muxaka wa tilayini ta mitila:

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Matafula lama tirhaka

Kandziyisa layini ya tafula kumbe sele hi ku engetela .table-activetlilasi.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@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>

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@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>

Xana ti- variant ni matafula lama nga ni switwari swi tirha njhani?

Eka matafula lama nga ni switlhokovetselo ( tilayini ta mitila , tikholomu ta mitila , tilayini leti nga hoverable , na matafula lama tirhaka ), hi tirhise tindlela tin’wana ku endla leswaku switandzhaku leswi swi tirha eka tinxaka ta hina hinkwato ta tafula :

Hi sungula hi ku veka ndzhaku ka sele ya tafula hi --bs-table-bgnhundzu ya ntolovelo. Swihlawulekisi hinkwaswo swa tafula swi tlhela swi veka nhundzu yoleyo ya ntolovelo ku penda tisele ta tafula. Hi ndlela leyi, a hi ngheni ekhombyeni loko mihlovo leyi nga vonakiki ngopfu yi tirhisiwa tanihi swifaniso swa le ndzhaku swa tafula.
Kutani hi engetela ndzhuti wa bokisi ra inset eka tisele ta tafula na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer ehenhla ka yin'wana na yin'wana leyi boxiweke background-color. Hikuva hi tirhisa spread leyikulu naswona hi nga ri na blur, muvala wu ta va wa monotone. Leswi --bs-table-accent-bgyi nga set hi default, a hi na ndzhuti wa bokisi ra default.
Loko ku engeteriwa kumbe .table-striped, .table-striped-columns, .table-hoverkumbe .table-activetitlilasi, the --bs-table-accent-bgyi vekiwa eka muvala lowu nga vonakiki ngopfu leswaku yi va ni mihlovo ya le ndzhaku.
Eka muxaka wun’wana ni wun’wana wa tafula, hi humesa --bs-table-accent-bgmuvala lowu nga ni ku hambana lokukulu swinene ku ya hi muvala wolowo. Hi xikombiso, muvala wa accent for .table-primaryi wa ntima kasi .table-darkwu na muvala wa accent wo vonikela.
Mihlovo ya tsalwa ni ya ndzilakano yi endliwa hi ndlela leyi fanaka, naswona mihlovo ya yona yi kumiwa ndzhaka hi ku tiyimisela.

Endzhaku ka swifaniso swi languteka hi ndlela leyi:

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

Mindzilakano ya tafula

Matafula lama nga ni mindzilakano

Engetelani .table-borderedku kuma mindzilakano eka matlhelo hinkwawo ya tafula na tisele.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Switirhisiwa swa mihlovo ya le ndzilakaneni swi nga engeteriwa ku cinca mihlovo:

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Matafula lama nga riki na mindzilakano

Engetelani .table-borderlesstafula leri nga riki na mindzilakano.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Matafula lamatsongo

Engeta .table-smku endla leswaku yin’wana na yin’wana .tableyi hlangana hi ku tsema tisele hinkwato paddinghi le xikarhi.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

Swihambanisi swa ntlawa wa tafula

Engetela ndzilakano lowu tiyeke, lowu nga ni munyama exikarhi ka mintlawa ya tafula— <thead>, <tbody>, na <tfoot>—hi .table-group-divider. Endla muvala hi ku cinca border-top-color(leswi sweswi hi nga nyikiki tlilasi ya vukorhokeri eka nkarhi lowu).

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@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>

Ku ringanisa loku yimisiweke

Ti cells ta tafula ta <thead>ti tshama tiri vertical aligned kuya ehansi. Tisele ta tafula eka ti <tbody>dya ndzhaka ya ku ringanana ka tona ku suka <table>naswona ti ringanisiwa ku ya ehenhla hi ku tiyimisela. Tirhisa titlilasi ta ku ringanisa loku yimisiweke ku tlhela u ringanisa laha swi lavekaka kona.

Nhlokomhaka ya 1	Nhlokomhaka ya 2	Nhlokomhaka ya 3	Nhlokomhaka ya 4
Sele leyi yi dya ndzhaka `vertical-align: middle;`eka tafula	Sele leyi yi dya ndzhaka `vertical-align: middle;`eka tafula	Sele leyi yi dya ndzhaka `vertical-align: middle;`eka tafula	Leswi laha i tsalwa rin’wana ra xikhomela-ndhawu, leri kunguhatiweke ku teka ndhawu yo tala swinene yo yima, ku kombisa ndlela leyi ku ringanisa loku yimisiweke ku tirhaka ha yona eka tisele leti hundzeke.
Sele leyi yi dya ndzhaka `vertical-align: bottom;`ku suka eka layini ya tafula	Sele leyi yi dya ndzhaka `vertical-align: bottom;`ku suka eka layini ya tafula	Sele leyi yi dya ndzhaka `vertical-align: bottom;`ku suka eka layini ya tafula	Leswi laha i tsalwa rin’wana ra xikhomela-ndhawu, leri kunguhatiweke ku teka ndhawu yo tala swinene yo yima, ku kombisa ndlela leyi ku ringanisa loku yimisiweke ku tirhaka ha yona eka tisele leti hundzeke.
Sele leyi yi dya ndzhaka `vertical-align: middle;`eka tafula	Sele leyi yi dya ndzhaka `vertical-align: middle;`eka tafula	Sele leyi yi ringaniseriwe ehenhla.	Leswi laha i tsalwa rin’wana ra xikhomela-ndhawu, leri kunguhatiweke ku teka ndhawu yo tala swinene yo yima, ku kombisa ndlela leyi ku ringanisa loku yimisiweke ku tirhaka ha yona eka tisele leti hundzeke.

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

Ku endla swisaka

Switayili swa ndzilakano, switayele leswi tirhaka, na ku hambana ka tafula a swi dyi ndzhaka hi matafula lama pfanganisiweke.

# .

Sungula

Hetelela

Khoma

Marka

Otto

@mdo

Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
A	Sungula	Hetelela
B. B.	Sungula	Hetelela
C.	Sungula	Hetelela

Larry

Xinyenyana

@twitter

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

Ndlela leyi ku endla swisaka swi tirhaka ha yona

Ku sivela switayele swihi na swihi ku vupfa eka matafula lama pfanganisiweke, hi tirhisa xihlawulekisi xa xihlanganisi xa n’wana ( >) eka CSS ya hina. Tanihi leswi hi lavaka ku kongomisa ti- tds na thti-s hinkwato eka thead, tbody, na tfoot, xihlawulekisi xa hina a xi ta languteka xi lehe swinene handle ka xona. Hi ndlela yaleyo, hi tirhisa xihlawulekisi lexi langutekaka xi nga tolovelekanga .table > :not(caption) > * > *ku kongomisa hinkwaswo swa tds na ths swa .table, kambe ku hava na yin’we ya matafula wahi na wahi lama nga vaka kona lama pfanganisiweke.

Xiya leswaku loko u engetela <tr>s tanihi vana vo kongoma va tafula, sweswo <tr>swi ta phutseriwe hi a <tbody>hi ku tiyimisela, xisweswo swi endla leswaku swihlawulekisi swa hina swi tirha hilaha swi kunguhatiweke hakona.

Anatomy

Nhloko ya tafula

Ku fana na matafula na matafula ya ntima, tirhisa titlilasi ta swihundzuluxi .table-lightkumbe .table-darkku endla leswaku <thead>s yi vonaka yi ri ya grey yo vonikela kumbe ya ntima.

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@twitter

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

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@twitter

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

Tafula ra milenge

# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@twitter
Xiphemu xa le hansi	Xiphemu xa le hansi	Xiphemu xa le hansi	Xiphemu xa le hansi

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

Swifaniso swa le hansi

A <caption>yi tirha ku fana na nhlokomhaka ya tafula. Yi pfuna vatirhisi lava nga ni swihlaya-swikirini leswaku va kuma tafula ni ku twisisa leswaku ri vulavula hi yini ni ku endla xiboho xa loko va lava ku ri hlaya.

Nxaxamelo wa vatirhisi
# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry wa Xinyenyana		@twitter

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

U nga ha tlhela u veka <caption>ehenhla ka tafula hi .caption-top.

Nxaxamelo wa vatirhisi
# .	Sungula	Hetelela	Khoma
1.	Marka	Otto	@mdo
2.	Yakobe	Thornton	@mafurha
3.	Larry	Xinyenyana	@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>

Matafula lama hlamulaka

Matafula lama hlamulaka ma pfumelela matafula ku rhendzeleka hi ndlela yo olova hi ku olova. Endla tafula rihi na rihi ri hlamula eka swivono hinkwaswo hi ku phutsela a .tablehi .table-responsive. Kumbe, hlawula ndhawu leyikulu yo wisa leyi u nga ta va ni tafula leri hlamulaka ha yona hi ku tirhisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Ku tsemiwa/ku tsemiwa loku yimisiweke

Matafula lama hlamulaka ma tirhisa overflow-y: hidden, lama tsemaka rungula rihi na rihi leri hundzaka emakumu ya le hansi kumbe ya le henhla ya tafula. Ngopfu-ngopfu, leswi swi nga tsema timenyu leti nga ehansi ni switirhisiwa swin’wana swa vanhu van’wana.

Minkarhi hinkwayo u hlamula

Ku tsemakanya ndhawu yin’wana ni yin’wana yo wisa, tirhisa .table-responsiveeka matafula lama rhendzelekaka hi ndlela leyi nga etlhelo.

# .	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
1.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele

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

Breakpoint leyi kongomeke

Tirhisa .table-responsive{-sm|-md|-lg|-xl|-xxl}hilaha swi lavekaka hakona ku tumbuluxa matafula lama hlamulaka ku fikela eka ndhawu yo karhi yo wisa. Ku suka eka ndhawu yoleyo yo tshoveka ku ya ehenhla, tafula ri ta tikhoma hi ndlela leyi tolovelekeke naswona ri nga rhendzeleki hi ndlela leyi nga etlhelo.

Matafula lawa ya nga ha vonaka ya tshovekile ku kondza switayele swa wona swo hlamula swi tirha eka ku anama ko karhi ka xivono.

# .	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
1.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele

# .	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
1.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele

# .	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
1.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele

# .	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
1.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele

# .	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
1.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele

# .	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka	Nhlokomhaka
1.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele	Sele	Sele	Sele

<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

Swilo leswi cinca-cincaka

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

Xintambyana

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

Ku endla swilo hi ku landza swilaveko swa wena

Swilo leswi cinca-cincaka swa xivangelo ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) swi tirhisiwa ku kumisisa ku hambana eka swihlawulekisi swa tafula.
Handle ka ti light & dark table variants, mihlovo ya theme yi voningiwa hi $table-bg-scalevariable.