Kplɔ̃wo

Nuŋlɔɖiwo kple kpɔɖeŋuwo na kplɔ̃wo ƒe atsyãwɔwɔ ƒe tiatiawɔwɔ (le woƒe zazã si bɔ le JavaScript ƒe kpeɖeŋutɔwo me ta) kple Bootstrap.

Le axa sia dzi

Kpɔɖeŋunyagbɔgblɔ

Le nusiwo wozãna le afisiafi <table>le ame etɔ̃lia ƒe widgetwo abe ɣletigbalẽwo kple ŋkeke tiatiawɔlawo ene ta la, Bootstrap ƒe kplɔ̃wo nye tiatiawɔwɔ . Tsɔ gɔmeɖoanyi ƒe hatsotso la kpe .tableɖe ɖesiaɖe ŋu <table>, emegbe nàkekee ɖe enu kple míaƒe tiatiawɔblɔɖe ƒe hatsotsowo alo atsyã tɔxɛwo. Womenyi kplɔ̃ ƒe atsyãwo katã ƒe dome le Bootstrap me o, si fia be woateŋu awɔ kplɔ̃ ɖesiaɖe si wotsɔ ƒo ƒui ƒe atsyã le eɖokui si tso dzila gbɔ.

Ne èzã kplɔ̃ ƒe dzesi vevitɔ kekeake la, alesi .table-dzi kplɔ̃wo le le Bootstrap mee nye esi.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Vovototowo

Zã nya siwo ƒo xlãe ƒe klasswo tsɔ de ama kplɔ̃wo, kplɔ̃wo ƒe fliwo alo lãmenugbagbevi ɖekaɖekawo.

Nusrɔ̃ƒe	Tanya ƒe tanya	Tanya ƒe tanya
Gᴐmedzeƒe	Gaxɔ	Gaxɔ
Gɔmedzeƒe	Gaxɔ	Gaxɔ
Sekɛndrisuku	Gaxɔ	Gaxɔ
Dzidzedzekpᴐkpᴐ	Gaxɔ	Gaxɔ
Ŋɔdzi	Gaxɔ	Gaxɔ
Kpɔnyuiedodo	Gaxɔ	Gaxɔ
Nyatakaka	Gaxɔ	Gaxɔ
Kekeli	Gaxɔ	Gaxɔ
Nyrɔ	Gaxɔ	Gaxɔ

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

Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla ɖe .visually-hiddenklass la ŋu ene.

Kplɔ̃ siwo dzi woŋlɔ nu ɖo

Fli siwo ŋu fli le

Zãe nàtsɔ .table-stripedakpe zebra-striping ɖe kplɔ̃ ƒe fli ɖesiaɖe si le <tbody>.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Sɔti siwo ŋu fli le

Zãe nàtsɔ .table-striped-columnsakpe zebra-striping ɖe kplɔ̃ ƒe sɔti ɖesiaɖe ŋu.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Woateŋu atsɔ klass siawo hã akpe ɖe kplɔ̃ ƒe vovototowo ŋu:

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Fli siwo woate ŋu aʋuʋu

Tsɔ kpe ɖe eŋu .table-hoverbe wòana hover nɔnɔme nawɔ dɔ le kplɔ̃ ƒe fliwo dzi le a <tbody>.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Woateŋu atsɔ fli siawo siwo woate ŋu aʋuʋu la hã aƒo ƒu kple fli siwo le fli me ƒe tɔtrɔ:

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Kplɔ̃ siwo le dɔ wɔm

Te gbe ɖe kplɔ̃ ƒe fli alo lãmenugbagbevi aɖe dzi to .table-activeklass aɖe tsɔtsɔ kpee me.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Aleke vovototoawo kple kplɔ̃ siwo dzi woŋlɔ nu ɖo la wɔa dɔe?

Le kplɔ̃ siwo dzi woŋlɔ nu ɖo ( fli siwo le fli me , sɔti siwo le fli me , fli siwo woate ŋu aʋuʋu , kple kplɔ̃ siwo le dɔ wɔm ), míezã mɔnu aɖewo tsɔ na ŋusẽkpɔɖeamedzi siawo nawɔ dɔ na míaƒe kplɔ̃ ƒe tɔtrɔwo katã :

Míedzea egɔme kple kplɔ̃dzinu ƒe megbenya ɖoɖo kple --bs-table-bgcustom property. Emegbe kplɔ̃ ƒe tɔtrɔwo katã ɖoa nɔnɔme tɔxɛ ma be wòade amadede kplɔ̃ ƒe lãmenugbagbeviawo me. To mɔ sia dzi la, míegena ɖe kuxi me ne wozã amadede siwo me kɔ afã kple afã abe kplɔ̃ ƒe megbenyawo ene o.
Emegbe míetsɔa inset box shadow kpena ɖe table cells ŋu kple box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer ɖe ɖesiaɖe si woɖo la tame background-color. Esi míezãa kaka gã aɖe eye míezãa blur aɖeke o ta la, amadedea anye monotone. Esi wònye --bs-table-accent-bgbe womeɖoe le gɔmedzedzea me o ta la, aɖaka ƒe vɔvɔli si woɖo ɖi mele mía si o.
Ne wotsɔ .table-striped, .table-striped-columns, .table-hoveralo .table-activeklasswo dometɔ ɖeka kpe ɖe eŋu la, --bs-table-accent-bgwoɖoa amadede si me kɔ afã kple afã be wòade amadede megbenyawo me.
Le kplɔ̃ ƒe tɔtrɔ ɖesiaɖe gome la, míewɔa --bs-table-accent-bgamadede si me vovototo gãtɔ kekeake le le amadede ma nu. Le kpɔɖeŋu me, gbeɖiɖi ƒe amadede na .table-primarydo viviti wu esime .table-darkgbeɖiɖi ƒe amadede si me kɔ wu le esi.
Wowɔa nuŋɔŋlɔ kple liƒo ƒe amadedewo le mɔ ɖeka nu, eye woƒe amadedewo nye domenyinyi le gɔmedzedzea me.

Le megbe la, edzena ale:

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

Tabla ƒe liƒowo

Kplɔ̃ siwo ŋu liƒo le

Tsɔe kpe ɖe eŋu .table-borderedna liƒowo le kplɔ̃a ƒe akpawo katã kple lãmenugbagbeviwo.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Woateŋu atsɔ liƒo ƒe amadede ƒe dɔwɔnuwo akpe ɖe eŋu be woatrɔ amadedewo:

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Kplɔ̃ siwo ŋu liƒo mele o

Tsɔ kpe ɖe eŋu .table-borderlessna kplɔ̃ si me liƒowo mele o.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Kplɔ̃ suewo

Tsɔe kpe ɖe eŋu .table-smbe .tablewòagawɔ ɖeka wu to lãmenugbagbeviawo katã ɖeɖe paddingɖe afã me.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Tabla ƒe ƒuƒoƒo ƒe mamawo

Tsɔ liƒo si le kpekpem wu, si do viviti wu kpe ɖe kplɔ̃ ƒe ƒuƒoƒoawo dome— <thead>, <tbody>, kple <tfoot>—kple .table-group-divider. Trɔ asi le amadedea ŋu to asitɔtrɔ le border-top-color(si míetsɔ utility class na fifia le ɣeyiɣi sia me o).

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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>

Nusiwo woɖo ɖe ɖoɖo nu le tsitrenu

Table cells of <thead>nɔa tsitrenu ɣesiaɣi ɖe ete. Table cells in <tbody>domenyi woƒe ɖoɖowɔwɔ tso <table>eye woɖo wo ɖe etame le gɔmedzedzea me. Zã vertical align classes nàtsɔ agbugbɔ aɖoe ɖe ɖoɖo nu le afisi wòhiã le.

Tanya 1 lia	Tanya 2 lia	Tanya 3 lia	Tanya 4 lia
Lãmenugbagbevi sia nyi dome `vertical-align: middle;`tso kplɔ̃a dzi	Lãmenugbagbevi sia nyi dome `vertical-align: middle;`tso kplɔ̃a dzi	Lãmenugbagbevi sia nyi dome `vertical-align: middle;`tso kplɔ̃a dzi	Esia nye teƒeɖoɖo ƒe nuŋɔŋlɔ aɖewo le afisia, si woɖo be wòaxɔ teƒe si le tsitrenu vie ŋutɔ, be woatsɔ aɖe alesi tsitrenu ƒe ɖoɖowɔwɔ wɔa dɔe le lãmenugbagbevi siwo do ŋgɔ me la afia.
Lãmenugbagbevi sia nyi dome `vertical-align: bottom;`tso kplɔ̃a ƒe fli me	Lãmenugbagbevi sia nyi dome `vertical-align: bottom;`tso kplɔ̃a ƒe fli me	Lãmenugbagbevi sia nyi dome `vertical-align: bottom;`tso kplɔ̃a ƒe fli me	Esia nye teƒeɖoɖo ƒe nuŋɔŋlɔ aɖewo le afisia, si woɖo be wòaxɔ teƒe si le tsitrenu vie ŋutɔ, be woatsɔ aɖe alesi tsitrenu ƒe ɖoɖowɔwɔ wɔa dɔe le lãmenugbagbevi siwo do ŋgɔ me la afia.
Lãmenugbagbevi sia nyi dome `vertical-align: middle;`tso kplɔ̃a dzi	Lãmenugbagbevi sia nyi dome `vertical-align: middle;`tso kplɔ̃a dzi	Lãmenugbagbevi sia le ɖoɖo nu ɖe etame.	Esia nye teƒeɖoɖo ƒe nuŋɔŋlɔ aɖewo le afisia, si woɖo be wòaxɔ teƒe si le tsitrenu vie ŋutɔ, be woatsɔ aɖe alesi tsitrenu ƒe ɖoɖowɔwɔ wɔa dɔe le lãmenugbagbevi siwo do ŋgɔ me la afia.

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

Atɔwɔwɔ

Liƒo ƒe atsyãwo, atsyã siwo le dɔ wɔm, kple kplɔ̃ ƒe tɔtrɔwo menyia dome to kplɔ̃ siwo wotsɔ ƒo ƒui me o.

# .

Gbã

Nᴐ anyi didi

Alᴐ

Marko

Otto ƒe nyawo

@mdo dzi

Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
A. A.	Gbã	Nᴐ anyi didi
B. B	Gbã	Nᴐ anyi didi
C	Gbã	Nᴐ anyi didi

Larry ye nye esia

Xe la

@twitter dzi

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

Alesi atɔwɔwɔ wɔa dɔe

Be míaxe mɔ ɖe atsyã aɖeke nu be wòagadzo ayi kplɔ̃ siwo wotsɔ ƒo ƒui dzi o la, míezãa ɖeviwo ƒe ƒuƒoƒo ( >) tiatia le míaƒe CSS me. Esi wònye be ehiã be míaɖo taɖodzinu na tds kple ths siwo katã le thead, tbody, kple , me tfootta la, míaƒe tiatiawɔnu la adze didi ŋutɔ ne menye eyae o. Abe alesi wòle ene la, míezãa .table > :not(caption) > * > *tiatiawɔnu si ƒe dzedzeme to vovo vie la tsɔ ɖoa taɖodzinu na tds kple ths siwo katã le la me.table , gake kplɔ̃ siwo ate ŋu anye nested la dometɔ aɖeke o.

De dzesii be ne ètsɔ <tr>s kpee abe kplɔ̃ ƒe viwo tẽ ene la, <tr>woaxatsa esiawo ɖe a <tbody>me le gɔmedzedzea me, si ana míaƒe tiatiawɔlawo nawɔ dɔ abe alesi woɖoe ene.

Ŋutilã ƒe wɔwɔme

Kplɔ̃ ƒe ta

Abe alesi wòle le kplɔ̃wo kple kplɔ̃ viviwo gome ene la, zã tɔtrɔ ƒe hatsotsowo .table-lightalo .table-darknàna <thead>s nadze abe ɖe wòle keklẽm alo le ɣie ene.

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe la	@twitter dzi

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

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe la	@twitter dzi

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

Kplɔ̃dzifɔ

# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe la	@twitter dzi
Afɔdzideƒe	Afɔdzideƒe	Afɔdzideƒe	Afɔdzideƒe

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

Nya siwo woŋlɔ ɖe agbalẽa te

A <caption>wɔa dɔ abe tanya na kplɔ̃ ene. Ekpena ɖe ezãla siwo si screen reader le ŋu be woake ɖe kplɔ̃ ŋu ahase nusi ŋu wòku ɖo gɔme eye woatso nya me ne wodi be yewoaxlẽe.

Ŋlɔ ezãlawo ƒe ŋkɔwo ɖi
# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

Àte ŋu atsɔ la <caption>aɖo kplɔ̃a tame hã kple .caption-top.

Ŋlɔ ezãlawo ƒe ŋkɔwo ɖi
# .	Gbã	Nᴐ anyi didi	Alᴐ
1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe la	@twitter dzi

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>

Kplɔ̃ siwo ɖoa nya ŋu

Tabla siwo ɖoa nya ŋu la wɔnɛ be woate ŋu aʋuʋu kplɔ̃wo le tsia dzi bɔbɔe. Na kplɔ̃ ɖesiaɖe nawɔ dɔ le nukpɔkpɔwo katã dzi to a babla .tablekple .table-responsive. Alo, tia breakpoint si sɔ gbɔ wu si dzi nàto akpɔ kplɔ̃ si ɖoa nya ŋu vaseɖe to .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Tsitrenu ƒe lãɖeɖe/tsoɖeɖe

Tabla siwo ɖoa nya ŋu la zãa overflow-y: hidden, si ɖea nyatakaka ɖesiaɖe si yi ŋgɔ wu kplɔ̃a ƒe akpa siwo le ete alo etame la ɖa. Vevietɔ esia ate ŋu atso nuɖuɖu siwo le fli dzi kple ame bubuwo ƒe dɔwɔnu bubuwo ɖa.

Wowɔa nu ɖe ame ŋu ɣesiaɣi

Le breakpoint ɖesiaɖe dzi la, zãe .table-responsivena kplɔ̃ siwo le ʋuʋum le tsia dzi.

# .	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
1.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
2.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
3.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ

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

Breakpoint tɔxɛ aɖe

Zãe .table-responsive{-sm|-md|-lg|-xl|-xxl}alesi wòhiãe nàtsɔ awɔ kplɔ̃ siwo ɖoa nya ŋu vaseɖe gbagbãƒe aɖe koŋ. Tso gbagbãƒe ma dzi va ɖo dzi la, kplɔ̃a awɔ nu abe alesi wòle ene eye maʋuʋu le tsia dzi o.

Tabla siawo ateŋu adze abe ɖe wogbã ene vaseɖe esime woƒe ŋuɖoɖo ƒe atsyãwo nawɔ dɔ le nukpɔkpɔ ƒe kekeme tɔxɛwo dzi.

# .	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
1.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
2.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
3.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ

# .	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
1.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
2.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
3.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ

# .	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
1.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
2.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
3.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ

# .	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
1.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
2.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
3.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ

# .	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
1.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
2.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
3.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ

# .	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya	Tanya ƒe tanya
1.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
2.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ
3.	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ	Gaxɔ

<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 ƒe nyawo

Nusiwo trɔna

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

Xatsa

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

Trɔtrɔ ɖe nɔnɔmewo ŋu

Nusiwo gbɔ wòtso ƒe tɔtrɔwo ( $table-striped-bg-factor, $table-active-bg-factor& .$table-hover-bg-factor ) tsɔ dea dzesi vovototo si le table variants me.
To vovo na kekeli & viviti kplɔ̃ ƒe vovototowo la, tanya ƒe amadedewo le keklẽm to $table-bg-scaletɔtrɔa me.