Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

Iitafile

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

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
1 Phawula Otto @mdo
Okubhalwe ngasentla kwekhasi Okubhalwe ngasentla kwekhasi Okubhalwe ngasentla kwekhasi
A Ekuqaleni Okokugqibela
B Ekuqaleni Okokugqibela
C Ekuqaleni Okokugqibela
3 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.