in English

Litafole

Litokomane le mehlala ea ho khetha ho kenya litafole (ho fanoe ka tšebeliso e atileng ho li-plugins tsa JavaScript) ka Bootstrap.

Leqepheng lena

Kakaretso

Ka lebaka la ts'ebeliso e atileng ea <table>likarolo ho li-widget tsa mokha oa boraro joalo ka khalendara le likhetho tsa matsatsi, litafole tsa Bootstrap li khetha ho kena . Kenya sehlopha sa mantlha .tableho efe kapa efe <table>, ebe u atolosa ka litlelase tsa rona tsa boikhethelo tsa ho feto-fetoha kapa mekhoa ea tloaelo. Mefuta eohle ea litafole ha e futsitsoe ho Bootstrap, ho bolelang hore litafole life kapa life tse hahelletsoeng li ka ngoloa ntle le motsoali.

U sebelisa letšoao la motheo la tafole, mona ke hore na .tablelitafole tse thehiloeng ho Bootstrap li shebahala joang.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@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>

Mefuta e fapaneng

Sebelisa litlelase tsa maemo ho litafole tsa mebala, mela ea litafole kapa lisele tse ikemetseng.

Sehlopha	Sehlooho	Sehlooho
Ea kamehla	Sele	Sele
Ea mantlha	Sele	Sele
Ea bobeli	Sele	Sele
Katleho	Sele	Sele
Kotsi	Sele	Sele
Tlhokomediso	Sele	Sele
Info	Sele	Sele
Leseli	Sele	Sele
Lefifi	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>

Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .visually-hiddensehlopha.

Litafole tse phahamisitsoeng

Mela e methalo

Sebelisa .table-stripedho kenya liqoaha-striping moleng ofe kapa ofe oa tafole ka har'a <tbody>.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Litšiea tse metsero

Sebelisa .table-striped-columnsho eketsa liqoaha ho kholamo efe kapa efe ea tafole.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Lihlopha tsena li ka eketsoa ho mefuta e fapaneng ea litafole:

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Hoverable mela

Eketsa .table-hoverho nolofalletsa boemo ba hover holim'a mela ea tafole ka har'a <tbody>.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Mela ena e methalo e ka kopanngoa le mefuta e meng ea mela e methalo:

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Litafole tse sebetsang

Totobatsa mola oa tafole kapa sele ka ho eketsa .table-activesehlopha.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@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>

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@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>

Litafole le litafole tsa accented li sebetsa joang?

Bakeng sa litafole tse hatisitsoeng ( mela e mebala-bala , litšiea tse mebala-bala , mela e ts'oarehang , le litafole tse sebetsang ), re sebelisitse mekhoa e meng ho etsa hore liphello tsena li sebetse bakeng sa mefuta eohle ea litafole tsa rona :

Re qala ka ho beha bokamorao ba sele ea tafole e nang le --bs-table-bgthepa ea moetlo. Mefuta eohle ea litafole ebe e beha thepa eo e tloaelehileng ho etsa mebala ea lisele tsa tafole. Ka tsela ena, ha re kene mathateng haeba mebala e sa bonahaleng e sebelisoa e le semelo sa tafole.
Ebe re kenya moriti oa lebokose la inset holim'a lisele tsa tafole ka ho beha box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);holim'a ntho leha e le efe e boletsoeng background-color. Hobane re sebelisa sekhahla se seholo mme ha se na lefifi, 'mala o tla ba monotone. Kaha --bs-table-accent-bge sa hlophisoa ka ho sa feleng, ha re na moriti oa lebokose la kamehla.
Ha e ka ba .table-striped, .table-striped-columns, .table-hoverkapa .table-activelitlelase li eketsoa, --bs-table-accent-bg'mala o setetsoe ho 'mala o hlakileng ho etsa mebala bokamorao.
Bakeng sa phapang e 'ngoe le e' ngoe ea tafole, re hlahisa --bs-table-accent-bg'mala o nang le phapang e phahameng ka ho fetisisa ho itšetlehile ka' mala oo. Mohlala, 'mala oa lentsoe o .table-primarylefifi ha .table-darko na le' mala o bobebe.
Mebala le mebala ea moeli li hlahisoa ka tsela e ts'oanang, 'me mebala ea tsona e futsitsoe ka mokhoa o tloaelehileng.

Ka mor'a lipapali e shebahala tjena:

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

Meeli ea litafole

Litafole tse moeling

Eketsa .table-borderedbakeng sa meeli ka mahlakoreng 'ohle a tafole le lisele.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Lisebelisoa tsa mebala ea moeli li ka eketsoa ho fetola mebala:

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Litafole tse se nang meeli

Eketsa .table-borderlessbakeng sa tafole ntle le meeli.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Litafole tse nyane

Eketsa .table-smho etsa hore ho be .tablethata ho feta ka ho khaola sele eohle paddingka halofo.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

Likarohano tsa lihlopha tsa tafole

Eketsa moeli o motenya, o lefifi pakeng tsa lihlopha tsa litafole— <thead>, <tbody>, and <tfoot>— with .table-group-divider. Iketsetse mmala ka ho fetola border-top-color(eo hajoale re sa faneng ka sehlopha sa lisebelisoa bakeng sa hona joale).

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@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>

Tsepamiso e otlolohileng

Lisele tsa tafole <thead>li lula li theohile li le ka tlase. Lisele tsa tafole li <tbody>rua tekano ea tsona ho tloha <table>'me li hokahantsoe le holimo ka ho sa feleng. Sebelisa lihlopha tse otlolohileng ho ikamahanya hape moo ho hlokahalang.

Sehlooho sa 1	Sehlooho sa 2	Sehlooho sa 3	Sehlooho sa 4
Sele ena e rua `vertical-align: middle;`ho tloha tafoleng	Sele ena e rua `vertical-align: middle;`ho tloha tafoleng	Sele ena e rua `vertical-align: middle;`ho tloha tafoleng	Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
Sele ena e rua `vertical-align: bottom;`ho tloha moleng oa tafole	Sele ena e rua `vertical-align: bottom;`ho tloha moleng oa tafole	Sele ena e rua `vertical-align: bottom;`ho tloha moleng oa tafole	Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.
Sele ena e rua `vertical-align: middle;`ho tloha tafoleng	Sele ena e rua `vertical-align: middle;`ho tloha tafoleng	Sele ena e ikamahanya le hodimo.	Mona ke mongolo oa setšoantšisi, o reretsoeng ho nka sebaka se otlolohileng, ho bonts'a hore na tekano e otlolohileng e sebetsa joang liseleng tse tlang pele.

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

Nesting

Litaele tsa moeli, mekhoa e sebetsang, le mefuta e fapaneng ea litafole ha li futsoe ke litafole tse behiloeng.

Ea pele

Qetellong

Tšoara

Tšoaea

Otto

@mdo

Hlooho	Hlooho	Hlooho
A	Ea pele	Qetellong
B	Ea pele	Qetellong
C	Ea pele	Qetellong

Larry

Nonyana

@twitter

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

Kamoo sehlaha se sebetsang kateng

Ho thibela mefuta efe kapa efe hore e se ke ea lutla ho litafole tse behiloeng, re sebelisa sekhetho sa bana ( >) ho CSS ea rona. Kaha re hloka ho shebisisa tsohle tds le ths ho thead, tbody, le tfoot, mokhethoa oa rona o tla shebahala a le telele haholo ntle le eona. Ka hona, re sebelisa sekhetho se shebahalang se sa tloaeleha ho shebisisa .table > :not(caption) > * > *tsohle tdtsa , empa thha .tableho le e 'ngoe ea litafole tse ka bang teng.

Hlokomela hore haeba u eketsa <tr>s joalo ka bana ba tafole ka kotloloho, bao ba <tr>tla koaheloa ka ho sa <tbody>feleng, ka hona ho etsa hore bakhethoa ba rona ba sebetse joalo ka ha ho reriloe.

Anatomy

Hlooho ea tafole

Joalo ka litafole le litafole tse lefifi, sebelisa litlelase tsa ho fetola .table-lightkapa .table-darkho etsa hore <thead>e bonahale e le bobebe kapa boputsoa bo lefifi.

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@twitter

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

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@twitter

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

Leoto la tafole

#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@twitter
Botlase	Botlase	Botlase	Botlase

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

Litlhaloso

E <caption>sebetsa joalo ka sehlooho sa tafole. E thusa basebelisi ba nang le libali tsa skrine ho fumana tafole le ho utloisisa hore na e bua ka eng le ho etsa qeto ea hore na ba batla ho e bala.

Lenane la basebelisi
#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry Nonyana		@twitter

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

U ka boela ua beha <caption>ka holim'a tafole ka .caption-top.

Lenane la basebelisi
#	Ea pele	Qetellong	Tšoara
1	Tšoaea	Otto	@mdo
2	Jakobo	Thornton	@mafura
3	Larry	Nonyana	@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>

Litafole tse arabelang

Litafole tse arabelang li lumella litafole ho tsamaisoa ka mokhoa o tšekaletseng habonolo. Etsa hore tafole efe kapa efe e arabele libakeng tsohle tsa pono ka ho phuthela .tableka .table-responsive. Kapa, khetha sebaka se seholo seo u ka bang le tafole e arabelang ho fihlela ka ho sebelisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Keketso e emeng e otlolohileng

Litafole tse arabelang li sebelisa overflow-y: hidden, e tlosang litaba life kapa life tse fetang bokatlase kapa lipheletsong tse kaholimo tsa tafole. Haholo-holo, sena se ka fokotsa menyetla ea ho theoha le li-widget tse ling tsa motho oa boraro.

Kamehla e arabela

Hohle sebakeng se seng le se seng, sebelisa .table-responsivelitafole tse otlolohileng.

#	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho
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 e khethehileng

Sebelisa .table-responsive{-sm|-md|-lg|-xl|-xxl}kamoo ho hlokahalang ho theha litafole tse arabelang ho fihlela sebakeng se itseng. Ho tloha sebakeng seo ho ea holimo ho ea holimo, tafole e tla itšoara ka mokhoa o tloaelehileng 'me e se ke ea tsamaea e tšekaletse.

Litafole tsena li ka 'na tsa bonahala li robehile ho fihlela mekhoa ea bona ea ho arabela e sebetsa ho bophara bo itseng ba pono.

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

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

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

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

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

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

Lintho tse fapaneng

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

Ho iketsetsa

Lintlha tse fapaneng ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) li sebelisoa ho fumana phapang pakeng tsa litafole.
Ntle le mefuta e fapaneng ea litafole tse bobebe le tse lefifi, mebala ea theme e ntlafatsoa ke $table-bg-scalemefuta e fapaneng.