Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

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.

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>

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-success table-striped">
  ...
</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 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 ditlhaloso ( mela ya 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-hovergoba .table-activediklase di okeditšwe, the --bs-table-accent-bge beakantšwe go mmala wo o sa bonagalego gabotse go tsenya 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));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

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>

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 seswaro 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 seswaro 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 seswaro 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
3. 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 ka 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 go be go 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
<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:                 $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:          $border-color;

$table-striped-order:         odd;

$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šwa ke $table-bg-levelphetogo.