Ditafola

Ditokomane le mehlala ya go kgetha-ka setaele sa ditafola (ge go fiwa tšhomišo ya tšona ye e atilego ka go di-plugin tša JavaScript) ka Bootstrap.

Letlakaleng le

Kakaretšo

Ka lebaka la tšhomišo ye e atilego ya <table>dielemente go ralala le didirišwa tša mokgatlo wa boraro go swana le dialmanaka le dikgethi tša letšatšikgwedi, ditafola tša Bootstrap di kgetha go tsena . Oketša sehlopha sa motheo .tablego efe goba efe <table>, ke moka o atološe ka diklase tša rena tša sefetoši tša boikhethelo goba mekgwa ya tlwaelo. Mekgwa ka moka ya tafola ga e abelwe ka go Bootstrap, go ra gore ditafola dife goba dife tše di tsentšwego di ka setaele ka go ikemela go tšwa go motswadi.

Ka go šomiša go swaya tafola ga motheo kudu, mo ke ka fao .tableditafola tše di theilwego godimo di lebelegago ka gona ka go Bootstrap.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Diphetogo tša go fapana

Šomiša diklase tša diteng go mebala ditafola, methaladi ya tafola goba disele ka botee.

Phapoši	Hlogo ya ditaba	Hlogo ya ditaba
Hlokomologa	Sele	Sele
Motheo	Sele	Sele
Bobedi	Sele	Sele
Katlego	Sele	Sele
Kotsi	Sele	Sele
Temošo	Sele	Sele
Info	Sele	Sele
Seetša	Sele	Sele
Leswiswi	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>

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.

Ditafola tše di nago le ditlhaloso

Methaladi ya methalo

Šomiša .table-stripedgo oketša zebra-striping go mothaladi ofe goba ofe wa tafola ka gare ga <tbody>.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Dikholomo tša methalo

Šomiša .table-striped-columnsgo oketša zebra-striping go kholomo efe goba efe ya tafola.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Diklase tše di ka okeletšwa gape go diphetogo tša tafola:

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Methaladi yeo e ka phaphametšego

Oketša .table-hovergo kgontšha seemo sa go hover godimo ga methaladi ya tafola ka gare ga <tbody>.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Methaladi ye ya go phaphamala e ka kopanywa gape le mohuta wa mela ya methalo:

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Ditafole tše di šomago

Hlaola mothalo wa tafola goba sele ka go tlaleletša ka .table-activeklase.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Diphetogo le ditafola tša go hlaboša lentšu di šoma bjang?

Bakeng sa ditafola tše di nago le kgatelelo ( mela ya methalo , dikholomo tša methalo , mela yeo e ka phaphametšego , le ditafola tše di šomago ), re ile ra diriša dithekniki tše dingwe go dira gore ditlamorago tše di šome bakeng sa diphetogo tša rena ka moka tša tafola :

Re thoma ka go beakanya mokokotlo wa sele ya tafola ka --bs-table-bgthepa ya tlwaelo. Diphetogo ka moka tša tafola ke moka di beakanya thepa yeo ya tlwaelo go dira mebala ya disele tša tafola. Ka tsela ye, ga re tsene mathateng ge e ba mebala ya go se bonagale gabotse e šomišwa bjalo ka dimelo tša tafola.
Ke moka re tlaleletša ka moriti wa lepokisi la go tsenya godimo ga disele tša tafola ka box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);go legato godimo ga efe goba efe ye e laeditšwego background-color. Ka ge re diriša go phatlalala mo gogolo gomme go se na go fifala, mmala o tla ba wa monotone. Ka ge --bs-table-accent-bge sa bewa ka go ikemela, ga re na moriti wa lepokisi la go se fetoge.
Ge e ka ba .table-striped, .table-striped-columns, .table-hovergoba .table-activediklase di okeditšwe, the --bs-table-accent-bge beakantšwe go mmala wo o sa bonagalego gabotse go dira mmala wa mokokotlo.
Bakeng sa mohuta o mongwe le o mongwe wa tafola, re tšweletša --bs-table-accent-bgmmala wo o nago le phapano e phagamego kudu go ya ka mmala woo. Ka mohlala, mmala wa go hlaboša lentšu bakeng sa .table-primaryo lefsifsi mola .table-darko e-na le mmala wa go hlaboša lentšu o bofefo.
Mebala ya sengwalwa le ya mollwane e tšweletšwa ka tsela ye e swanago, gomme mebala ya yona e abelwa ka go ikemela.

Ka morago ga ditiragalo go bonala ka tsela ye:

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

Mellwane ya tafola

Ditafole tše di nago le mellwane

Oketša .table-borderedbakeng sa mellwane ka mahlakoreng ka moka a tafola le disele.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Didirišwa tša mebala ya mollwane di ka okeletšwa go fetoša mebala:

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Ditafole tšeo di se nago mellwane

Oketša .table-borderlessbakeng sa tafola e se nago mellwane.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Ditafole tše nnyane

Oketša .table-smgo dira gore e .tablebe ye e kopanego kudu ka go sega sele ka moka paddingka bogare.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

Dikarolwana tša sehlopha sa tafola

Oketša mollwane o motenya, o lefsifsi magareng ga dihlopha tša tafola— <thead>, <tbody>, le <tfoot>—ka .table-group-divider. Tlwaetša mmala ka go fetoša border-top-color(yeo ga bjale re sa e neego sehlopha sa utility sa yona mo nakong ye).

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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>

Go logaganya ga go ema thwii

Table lisele tsa <thead>ba kamehla paatsepama lolamisiwa ga ho tlase. Disele tša tafola ka di <tbody>ja go logaganya ga tšona go tšwa <table>gomme di logagantšwe go ya godimo ka go ikemela. Šomiša diklase tša go logaganya thwii go logaganya gape moo go nyakegago.

Hlogo ya 1	Hlogo ya 2	Hlogo ya 3	Hlogo ya 4
Sele ye e tšea bohwa `vertical-align: middle;`go tšwa tafoleng	Sele ye e tšea bohwa `vertical-align: middle;`go tšwa tafoleng	Sele ye e tšea bohwa `vertical-align: middle;`go tšwa tafoleng	Se mo ke sengwalwa se sengwe sa seswari sa lefelo, seo se reretšwego go tšea sekgoba se segolo sa go ema thwii, go laetša ka fao go logaganya go emego go šoma ka gona ka diseleng tše di fetilego.
Sele ye e tšea bohwa `vertical-align: bottom;`go tšwa mothalong wa tafola	Sele ye e tšea bohwa `vertical-align: bottom;`go tšwa mothalong wa tafola	Sele ye e tšea bohwa `vertical-align: bottom;`go tšwa mothalong wa tafola	Se mo ke sengwalwa se sengwe sa seswari sa lefelo, seo se reretšwego go tšea sekgoba se segolo sa go ema thwii, go laetša ka fao go logaganya go emego go šoma ka gona ka diseleng tše di fetilego.
Sele ye e tšea bohwa `vertical-align: middle;`go tšwa tafoleng	Sele ye e tšea bohwa `vertical-align: middle;`go tšwa tafoleng	Sele ye e logaganywa go ya godimo.	Se mo ke sengwalwa se sengwe sa seswari sa lefelo, seo se reretšwego go tšea sekgoba se segolo sa go ema thwii, go laetša ka fao go logaganya go emego go šoma ka gona ka diseleng tše di fetilego.

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

Go dira dihlaga

Mekgwa ya mellwane, mekgwa ye e šomago, le diphetogo tša tafola ga di abelwe ke ditafola tše di tsentšwego ka gare ga sehlaga.

# .

Mathomo

Mafelelo

Swara

1. 1.

Mareka

Otto o ile a re

@mdo

Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
A. A.	Mathomo	Mafelelo
B. B.	Mathomo	Mafelelo
C. C.	Mathomo	Mafelelo

Larry o ile a re

Nonyana

@ twitter e le

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

Kamoo go bea dihlaga go šomago ka gona

Go thibela ditaele dife goba dife go dutla go ditafola tše di tsentšwego ka gare ga sehlaga, re šomiša mokgethi wa motswako wa ngwana ( >) ka go CSS ya rena. Ka ge re swanetše go nepiša tds le ths ka moka go thead, tbody, le tfoot, mokgethi wa rena o be a tla bonagala e le e telele kudu ntle le yona. Ka ge go le bjalo, re šomiša .table > :not(caption) > * > *mokgethi wa go lebelela wo o sa tlwaelegago go nepiša tds le ths ka moka ya .table, eupša ga go le e tee ya ditafola tše di ka bago gona tša go tsenywa ka gare ga sehlaga.

Hlokomela gore ge o tlaleletša <tr>s bjalo ka bana ba thwii ba tafola, tšeo <tr>di tla phuthelwa ka a <tbody>ka go ikemela, ka go realo tša dira gore bakgethi ba rena ba šome bjalo ka ge di reretšwe.

Anatomy ya mmele

Hlogo ya tafola

Go swana le ditafola le ditafola tše lefsifsi, šomiša diklase tša sefetoši .table-lightgoba .table-darkgo dira gore <thead>s e bonagale e le bohlokwa bjo bo bofefo goba bjo bo fifetšego.

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

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

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

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

Leoto la tafole

# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le
Letlakala la ka tlase	Letlakala la ka tlase	Letlakala la ka tlase	Letlakala la ka tlase

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

Ditlhaloso tša mantšu

A e <caption>šoma bjalo ka hlogo ya tafola. E thuša badiriši bao ba nago le dibadi tša skrine go hwetša tafola le go kwešiša gore e mabapi le eng le go tšea sephetho sa ge e ba ba nyaka go e bala.

Lenaneo la badiriši
# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry ya Nonyana		@ twitter e le

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

O ka bea gape le <caption>ka godimo ga tafola ka .caption-top.

Lenaneo la badiriši
# .	Mathomo	Mafelelo	Swara
1. 1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

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>

Ditafola tše di arabelago

Ditafola tše di arabelago di dumelela ditafola go kgokološwa ka go rapalala gabonolo. Dira gore tafola efe goba efe e arabele go ralala le dipono ka moka ka go phuthela .tableka .table-responsive. Goba, kgetha palo e kgolo ya go kgaotša yeo o ka bago le tafola yeo e arabelago go fihla go yona ka go diriša .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Go kgaola/go kgaola ka go ema thwii

Ditafola tše di arabelago di diriša overflow-y: hidden, yeo e kgaolago diteng dife goba dife tšeo di fetago mapheko a ka tlase goba a godimo a tafola. Ka mo go kgethegilego, se se ka kgaola dimenu tša go theoga le didirišwa tše dingwe tša mokgatlo wa boraro.

Ka mehla o arabela

Go putla ntlha ye nngwe le ye nngwe ya go kgaotša, šomiša .table-responsivebakeng sa ditafola tša go kgokološa ka go rapalala.

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1. 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 itšego

Šomiša .table-responsive{-sm|-md|-lg|-xl|-xxl}ka moo go nyakegago go hlama ditafola tše di arabelago go fihla go ntlha ye e itšego ya go kgaotša. Go tloga ntlheng yeo ya go kgaotša go ya godimo, tafola e tla itshwara ka tlwaelo gomme e se ke ya sepelasepela ka go rapalala.

Ditafola tše di ka bonagala di senyegile go fihlela mekgwa ya tšona ya go arabela e šoma ka bophara bjo bo itšego bja lefelo la go lebelela.

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1. 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

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1. 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

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1. 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

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1. 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

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1. 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

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1. 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

Diphetogo

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

Segole

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

Go dira gore e be ya gago

Diphetogo tša mabaka ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) di šomišwa go laetša phapano ka go diphetogo tša tafola.
Ka ntle le diphetogo tša tafola ya seetša & lefsifsi, mebala ya sehlogo e bofefo ke $table-bg-scalephetogo.