latabatra

Documentation sy ohatra amin'ny fanaovana styling amin'ny latabatra (nomena ny fampiasana azy ireo amin'ny plugins JavaScript) miaraka amin'ny Bootstrap.

Amin'ity pejy ity

Overview

Noho ny fiparitahan'ny <table>singa amin'ny widgets an'ny antoko fahatelo toy ny kalandrie sy ny mpanangona daty, ny latabatra Bootstrap dia nisafidy . Ampio ny kilasin'ny fototra .tableamin'izay rehetra <table>, avy eo ampidiro miaraka amin'ireo kilasy modifier na fomba fanao mahazatra. Tsy lovaina ao amin'ny Bootstrap ny fomba latabatra rehetra, midika izany fa ny latabatra misy akany dia azo atao tsy miankina amin'ny ray aman-dreny.

Amin'ny fampiasana ny marika latabatra fototra indrindra, ity ny fomba .tablefijerin'ny tabilao mifototra amin'ny Bootstrap.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
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>

Variants

Mampiasà kilasy contextual handokoana latabatra, andalana latabatra na sela tsirairay.

KILASY	sasin-tenin'ny	sasin-tenin'ny
toerana misy anao	SELA	SELA
Kilonga	SELA	SELA
faharoa	SELA	SELA
FETY	SELA	SELA
Loza	SELA	SELA
FAMPITANDREMANA	SELA	SELA
Info	SELA	SELA
fahazavana	SELA	SELA
Maizina	SELA	SELA

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

Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hiddenkilasy.

latabatra misy accent

Mitsipika mitsipika

Ampiasao .table-stripedmba hanampiana zebra-striping amin'ny andalana latabatra ao anatin'ny <tbody>.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Andry misy miolakolaka

Ampiasao .table-striped-columnsmba hanampiana zebra-striping amin'ny tsanganana latabatra.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Ireo kilasy ireo koa dia azo ampiana amin'ny variana latabatra:

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Andalana hoverable

Ampio .table-hovermba ahafahan'ny toetry ny hover amin'ny andalana latabatra ao anatin'ny <tbody>.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Ireo andalana mihodinkodina ireo dia azo ampiarahina amin'ny variana misy andalana mitsipika:

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Tabilao mavitrika

Asongadino ny andalana na ny sela amin'ny fampidirana .table-activekilasy.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
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>

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
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>

Ahoana no fiasan'ny variants sy ny tabilao misy accent?

Ho an'ny tabilao misy tsindrim-peo ( tsipika miolakolaka , tsanganana miolakolaka , andalana azo hivezivezy , ary tabilao mavitrika ), dia nampiasa teknika sasany izahay mba hampandehanana ireo vokatra ireo amin'ny karazana latabatra rehetra :

Manomboka amin'ny fametrahana ny lafin'ny sela latabatra misy ny --bs-table-bgfananana manokana. Ny variana latabatra rehetra avy eo dia mametraka io fananana manokana io mba handokoana ny sela latabatra. Amin'izany fomba izany, tsy ho sahirana isika raha mampiasa loko semi-mangarahara ho fiaviana latabatra.
Avy eo dia ampiana alokaloka anaty boaty eo amin'ny selan'ny latabatra miaraka box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);amin'ny sosona eo an-tampon'ny zavatra voafaritra background-color. Satria mampiasa fiparitahana lehibe izahay ary tsy misy blur, dia ho monotone ny loko. Satria --bs-table-accent-bgtsy napetraka amin'ny alàlan'ny default, dia tsy manana alokaloka boaty default izahay.
Rehefa ampiana ny .table-striped, .table-striped-columns, .table-hoverna .table-activeny kilasy, --bs-table-accent-bgdia apetraka amin'ny loko semitransparent ny loko mba handokoana ny afara.
Ho an'ny variana latabatra tsirairay, dia mamorona --bs-table-accent-bgloko misy fifanoherana ambony indrindra miankina amin'io loko io izahay. Ohatra, ny loko lantom-peo ho an'ny .table-primarydia maizina kokoa raha .table-darkmisy loko lantom-peo maivana kokoa.
Ny lokon'ny soratra sy ny sisintany dia voaforona toy izany koa, ary ny lokon'izy ireo dia nolovaina tamin'ny alàlan'ny default.

Ao ambadiky ny sehatra dia toa izao:

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

Sisin-databatra

latabatra misy sisin-tany

Ampio .table-borderedny sisin-tany amin'ny lafiny rehetra amin'ny latabatra sy ny sela.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Azo ampiana fitaovana loko sisintany hanovana loko:

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Tabilao tsy misy sisin-tany

Ampio .table-borderlesslatabatra tsy misy sisiny.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

latabatra kely

Ampidiro .table-smmba hahatonga azy .tableho mirindra kokoa amin'ny fanapahana ny sela rehetra paddingho roa.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Mpizara vondrona latabatra

Manampia sisintany matevina kokoa, maizina kokoa eo anelanelan'ny vondrona latabatra— <thead>, <tbody>, ary <tfoot>— miaraka amin'ny .table-group-divider. Amboary ny loko amin'ny alàlan'ny fanovana ny border-top-color(izay tsy omentsika kilasy ampiasaina amin'izao fotoana izao).

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
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>

Fandrindrana mitsangana

Ny selan'ny latabatra <thead>dia mitsangana mitsangana hatrany ambany. Ny selan'ny tabilao ao dia <tbody>mandova ny filaharany avy <table>ary ampifandraisina amin'ny tampony amin'ny alàlan'ny default. Ampiasao ireo kilasy marindrano mitsangana mba hanitsiana indray raha ilaina.

Lohateny 1	Lohateny 2	Lohateny 3	Lohateny 4
Ity sela ity dia mandova `vertical-align: middle;`avy amin'ny latabatra	Ity sela ity dia mandova `vertical-align: middle;`avy amin'ny latabatra	Ity sela ity dia mandova `vertical-align: middle;`avy amin'ny latabatra	Ity misy lahatsoratra mpihazona toerana, natao haka toerana mitsangana kely, mba hampisehoana ny fomba fiasan'ny fampifanarahana mitsangana ao amin'ireo sela teo aloha.
Ity sela ity dia mandova `vertical-align: bottom;`avy amin'ny laharana latabatra	Ity sela ity dia mandova `vertical-align: bottom;`avy amin'ny laharana latabatra	Ity sela ity dia mandova `vertical-align: bottom;`avy amin'ny laharana latabatra	Ity misy lahatsoratra mpihazona toerana, natao haka toerana mitsangana kely, mba hampisehoana ny fomba fiasan'ny fampifanarahana mitsangana ao amin'ireo sela teo aloha.
Ity sela ity dia mandova `vertical-align: middle;`avy amin'ny latabatra	Ity sela ity dia mandova `vertical-align: middle;`avy amin'ny latabatra	Ity sela ity dia mifanandrify amin'ny tampony.	Ity misy lahatsoratra mpihazona toerana, natao haka toerana mitsangana kely, mba hampisehoana ny fomba fiasan'ny fampifanarahana mitsangana ao amin'ireo sela teo aloha.

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

akany

Ny fomba sisintany, ny fomba mavitrika, ary ny variana latabatra dia tsy lovain'ny latabatra misy akany.

VOALOHANY

FARANY

tahony

marika

Otto

@mdo

Lohapejy	Lohapejy	Lohapejy
ny	VOALOHANY	FARANY
amin '	VOALOHANY	FARANY
C	VOALOHANY	FARANY

Larry

ny Vorona

@twitter

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

Ahoana ny fiasan'ny akany

Mba hisorohana ny fomba tsy hivoaka amin'ny latabatra misy akany, dia mampiasa ny mpifantina child combinator ( >) ao amin'ny CSS-nay. Koa satria mila mikendry ny tds sy ths rehetra ao amin'ny thead, tbody, ary tfootny , ny mpifidy antsika dia mety ho lava be raha tsy misy izany. Noho izany, mampiasa ny mpifidy toa hafahafa izahay .table > :not(caption) > * > *mba hikendry ny tds sy ths rehetra amin'ny .table, saingy tsy misy na iray aza amin'ireo latabatra misy akany.

Mariho fa raha manampy <tr>s ho zanaka mivantana amin'ny latabatra ianao, <tr>dia hofonosina amin'ny <tbody>alàlan'ny default ireo, ka mahatonga ny mpifidy hiasa araka ny tokony ho izy.

Anatomy

Loha latabatra

Mitovy amin'ny latabatra sy ny latabatra maizina, ampiasao ny kilasy modifier .table-lightna .table-darkmba hahatonga ny <thead>s ho maivana na maizina.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter

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

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter

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

Tongotra latabatra

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter
Footer	Footer	Footer	Footer

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

maribolana

A <caption>miasa toy ny lohatenin'ny latabatra. Izy io dia manampy ireo mpampiasa manana mpamaky efijery hahita latabatra sy hahatakatra ny momba azy ary hanapa-kevitra raha te hamaky izany izy ireo.

Lisitry ny mpampiasa
#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Azonao atao ihany koa ny mametraka ny <caption>ambony latabatra miaraka amin'ny .caption-top.

Lisitry ny mpampiasa
#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@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>

Tabilao mandray andraikitra

Ny tabilao mandray andraikitra dia ahafahan'ny tabilao mihodina mitsivalana mora foana. Ataovy mamaly ny latabatra rehetra manerana ny viewports rehetra amin'ny alàlan'ny fametahana .tableny .table-responsive. Na, mifidiana teboka fiatoana ambony indrindra ahafahana manana latabatra mandray andraikitra amin'ny fampiasana .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Fampitahana / fanapahana mitsangana

Mampiasa ny tabilao mandray andraikitra ny overflow-y: hidden, izay manaisotra ny atiny rehetra mihoatra ny sisiny ambany na ambony amin'ny latabatra. Indrindra indrindra, ity dia afaka manaisotra ny menio midina sy ny widgets an'ny antoko fahatelo.

mamaly foana

Ampiasaina .table-responsiveamin'ny tabilao mitsivalana mihodinkodina eo amin'ny teboka rehetra.

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

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

Breakpoint manokana

Ampiasao .table-responsive{-sm|-md|-lg|-xl|-xxl}araka izay ilaina mba hamoronana tabilao mamaly hatramin'ny teboka iray manokana. Manomboka amin'io toerana tapaka io no miakatra, ny latabatra dia handeha amin'ny fomba mahazatra fa tsy hihodina mitsivalana.

Mety ho toa tapaka ireo tabilao ireo mandra-pihatra ny fomba famaliany amin'ny sakan'ny seranan-tsambo manokana.

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

<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

hiovaova

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

manome fitoerana

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

Customizing

Ny variables factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) dia ampiasaina hamaritana ny fifanoherana amin'ny variants table.
Ankoatra ireo variana latabatra maivana & maizina, ny loko lohahevitra dia hazavain'ny $table-bg-scalefari-piainana.