Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Tabali minnu bɛ yen

Sɛbɛnw ni misaliw tabali cogoya sugandicogo la (ka da u baaracogo kan JavaScript plugins kɔnɔ) ni Bootstrap ye.

Kuma bɛɛ lajɛlen

K’a sababu Kɛ fɛnw baaracogo caya ye <table>mɔgɔ sabananw ka wideyow ‘kɔnɔ i n’a fɔ kalandriyaw ani donw jatebɔlanw, Bootstrap ka tabali ye opt-in ye . Aw bɛ basigi kalasi fara a kan .table, <table>o kɔ aw bɛ a janya ni an ka kalasi modificateur optionnels ye walima custom styles. Tabali cogoyaw bɛɛ tɛ ciyɛn ta Bootstrap kɔnɔ, o kɔrɔ ye ko tabali minnu bɛ sigi sen kan, olu bɛɛ bɛ se ka cogoya kɛ u yɛrɛma ka bɔ bangebaga la.

Baara kɛli ni tabali taamasiyɛn jɔnjɔnba ye, nin ye .table-based tabali bɛ cogo min na Bootstrap kɔnɔ.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<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>

A ɲɔgɔnnaw

Baara kɛ ni sigida kalanw ye walasa ka tabali, tabali sinsinni walima selilɛri kelen-kelenw kulɛri.

Kilasi Kumakun Kumakun
Fɔlɔ Selili Selili
Fɔlɔ Selili Selili
Seginnkanni Selili Selili
Sanga Selili Selili
Farati Selili Selili
Lasɔmi Selili Selili
Info Selili Selili
Yeelen Selili Selili
Dibi Selili Selili
<!-- 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>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.

Tabali minnu bɛ ni accent ye

Layini sɛrɛkiliw

Aw bɛ baara kɛ ni .table-stripedzebra-striping fara tabali jirisun o tabali kan <tbody>.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-striped">
  ...
</table>

O kalanw fana bɛ se ka fara tabali suguya wɛrɛw kan:

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-dark table-striped">
  ...
</table>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-success table-striped">
  ...
</table>

Layiw minnu bɛ se ka wuli

Fàra ɲɔgɔn kan .table-hoverwalasa ka se ka hover cogoya dɔ Kɛ tabali jὲkuluw kan a kɔnɔ <tbody>.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-hover">
  ...
</table>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-dark table-hover">
  ...
</table>

O jirisunw fana bɛ Se ka Fàra ɲɔgɔn kan ni 'sènfɛ-sɛbɛnni-yɔrɔ ye:

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-striped table-hover">
  ...
</table>

Tabali minnu bɛ baara kɛ

Tabali sinsinni walima selilɛri dɔ jira ni .table-activekalan dɔ farali ye a kan.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<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>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<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>

Variantes ni accent tabali bɛ baara kɛ cogo di?

Tabali minnu bɛ fɔ ni sɛrɛkili ye ( jirisunw , jirisunw minnu bɛ se ka wuli , ani tabali minnu bɛ baara kɛ ), an ye fɛɛrɛ dɔw kɛ walasa ka nin nɔ ninnu kɛ baara ye an ka tabali suguya bɛɛ la :

  • An bɛ daminɛ ni tabali selilɛri dɔ kɔkanna sigili ye ni --bs-table-bgladamucogo ye. O kɔfɛ, tabali suguya bɛɛ bɛ o ladamucogo sigi walasa ka tabali seliw kulɛri. O cogo la, an tɛ gɛlɛya sɔrɔ ni kulɛri tilayɔrɔbaw bɛ kɛ tabali kɔkanna ye.
  • o kɔfɛ , an bɛ inset box shadow dɔ fara tabali seliw kan ni box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer ye min ɲɛfɔlen don background-color. Komin an bɛ baara Kɛ ni spread belebele ye ani blur tɛ, a kulɛri bɛna Kɛ monotone ye. Komin --bs-table-accent-bgis unset by default, an tɛ default box shadow sɔrɔ.
  • Ni .table-striped, .table-hoverwalima .table-activekalanw farala ɲɔgɔn kan, the --bs-table-accent-bgbɛ sigi kulɛri semitransparent la walasa ka kɔkanna kulɛri.
  • Tabali suguya kelen-kelen bɛɛ la, an bɛ --bs-table-accent-bgkulɛri dɔ Bɔ min ka danfara ka bon ka Kɛɲɛ ni o kulɛri ye. Misali la, accent color for .table-primaryye dibi ye k’a sɔrɔ .table-darka accent kulɛri ka nɔgɔn.
  • Sɛbɛnni ni dankan kulɛriw bɛ dilan cogo kelen na, wa u kulɛriw bɛ ciyɛn ta ka kɛɲɛ ni u yɛrɛ ye.

O kɔfɛ a bɛ i n’a fɔ nin cogo in na:

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

Tabali dancɛw

Tabali minnu bɛ dankan na

Aw bɛ a fara a kan .table-borderedwalasa ka danw kɛ tabali ni seliw fan bɛɛ la.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-bordered">
  ...
</table>

Dankan kulɛri nafamafɛnw bɛ se ka fara a kan walasa ka kulɛriw Changer:

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-bordered border-primary">
  ...
</table>

Tabali minnu dan tɛ u la

A fara a kan .table-borderlesska kɛ tabali ye min dan tɛ a la.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-borderless">
  ...
</table>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-dark table-borderless">
  ...
</table>

Tabali misɛnninw

Aw bɛ a fara a kan .table-smwalasa a ka kɛ fɛn .tableye min ka surun kosɛbɛ ni aw bɛ selilu bɛɛ tigɛ paddingtilayɔrɔ fila la.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-sm">
  ...
</table>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-dark table-sm">
  ...
</table>

Labɛnni jɔlen

Tabali seliw of <thead>bɛ jɔlen to tuma bɛɛ ka kɛɲɛ ni duguma ye. Tabali seliw in bɛ <tbody>u ka ɲɔgɔndan ciyɛn ta ka bɔ <table>ani u bɛ labɛn ka taa sanfɛ ka kɛɲɛ ni u ka daminɛ ye. Baara kɛ ni vertical align classes ye walasa ka segin ka ɲɔgɔn sɔrɔ yɔrɔ min na a mago bɛ a la.

Kumakun 1nan Kumakun 2nan Kumakun 3nan Kumakun 4nan
O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la Nin ye yɔrɔ-yɔrɔ-sɛbɛn dɔw ye yan, minnu laɲini ye ka yɔrɔ jɔlen dɔɔnin ta, walasa k’a jira jɔli-yɔrɔ-ko bɛ baara Kɛ cogo min na seliw tɛmɛnenw na.
O selilɛri in bɛ ciyɛn ta vertical-align: bottom;ka bɔ tabali sinsinni na O selilɛri in bɛ ciyɛn ta vertical-align: bottom;ka bɔ tabali sinsinni na O selilɛri in bɛ ciyɛn ta vertical-align: bottom;ka bɔ tabali sinsinni na Nin ye yɔrɔ-yɔrɔ-sɛbɛn dɔw ye yan, minnu laɲini ye ka yɔrɔ jɔlen dɔɔnin ta, walasa k’a jira jɔli-yɔrɔ-ko bɛ baara Kɛ cogo min na seliw tɛmɛnenw na.
O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la O selilɛri in bɛ ciyɛn ta vertical-align: middle;ka bɔ tabali la O selilɛri in bɛ ɲɔgɔn sɔrɔ ka kɛɲɛ ni sanfɛla ye. Nin ye yɔrɔ-yɔrɔ-sɛbɛn dɔw ye yan, minnu laɲini ye ka yɔrɔ jɔlen dɔɔnin ta, walasa k’a jira jɔli-yɔrɔ-ko bɛ baara Kɛ cogo min na seliw tɛmɛnenw na.
<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 (kɔnɔnafili).

Danyɔrɔ cogoyaw, cogoya minnu bɛ baara la, ani tabali suguya caman tɛ ciyɛn ta tabali minnu bɛ sigi sen kan.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
Kungolodilan Kungolodilan Kungolodilan
KELEN Fɔlɔ Laban
B. Bamako, Mali Fɔlɔ Laban
C. Bamako, Mali Fɔlɔ Laban
3 ye Larry ye Kɔnɔ in @twitter kan
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Nesting bɛ baara kɛ cogo min na

Walasa ka cogoya si bali ka wuli ka taa tabali nestedw la, an bɛ baara kɛ ni denmisɛnw faralen ɲɔgɔn kan ( >) sugandilan ye an ka CSS kɔnɔ. tdKomin an ka kan ka s ni ths bɛɛ laɲini thead, tbody, ani tfoot, an ka sugandili bɛna janya kosɛbɛ n'a tɛ. O cogo la, an bɛ baara Kɛ ni sugandilikɛlan ye min ɲɛ ye gansan ye kosɛbɛ walasa ka s ni s .table > :not(caption) > * > *bɛɛ Laɲini , nka tabali minnu bɛ Se ka Kɛ nest ye olu si tɛ.tdth.table

A kɔlɔsi ko n’i ye <tr>s Fàra ɲɔgɔn kan i n’a fɔ tabali denw tilennen, olu <tr>bɛna siri a la ka <tbody>da a kan, o cogo la an ka sugandilikɛlaw bɛ baara Kɛ i n’a fɔ a laɲininen dòn cogo min na.

Anatomie (Anatomie).

Tabali kunkolo

I n’a fɔ tabali ni tabali dibimanw, baara kɛ ni modificateur classes ye .table-lightwalima .table-darkka <thead>s kɛ i n’a fɔ a ɲɛ ye jɛman ye walima a ɲɛ ye nɛrɛmuguma ye.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tabali sen

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan
Senna-tɛgɛrɛ Senna-tɛgɛrɛ Senna-tɛgɛrɛ Senna-tɛgɛrɛ
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Sɛbɛnw ɲɛfɔli sɛbɛnw

A bɛ <caption>baara kɛ i n’a fɔ tabali kuncɛ. A bɛ baarakɛlaw dɛmɛ ni ɛkran kalanbagaw ye walasa u ka tabali sɔrɔ ani k’a faamuya a bɛ min kan ani k’a latigɛ n’u b’a fɛ k’a kalan.

Baarakɛlaw tɔgɔw sɛbɛn
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Aw bɛ se ka a bila fana <caption>tabali sanfɛ ni .caption-top.

Baarakɛlaw tɔgɔw sɛbɛn
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan
<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>

Tabali minnu bɛ jaabi di

Tabali minnu bɛ jaabi di, olu b’a to tabali bɛ se ka wuli ka taa a fɛ ni nɔgɔya ye. Aw bɛ tabali o tabali kɛ jaabi ye filɛlikɛlanw bɛɛ kɔnɔ ni aw ye a siri .tableni .table-responsive. Walima, aw bɛ kariyɔrɔba dɔ sugandi min bɛ se ka jaabi tabali sɔrɔ ni min ye ni aw bɛ baara kɛ ni .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Clipping/truncation jɔlen

Tabali minnu bɛ jaabi di, olu bɛ baara kɛ ni overflow-y: hidden, min bɛ kunnafoni fɛn o fɛn bɛ tɛmɛ tabali duguma walima sanfɛ dakunw kan, o bɛ tigɛ. Kɛrɛnkɛrɛnnenya la, o bɛ se ka clip off dropdown menus ani mɔgɔ wɛrɛw ka widget wɛrɛw bɔ.

A bɛ jaabi di tuma bɛɛ

Kariyɔrɔ kelen-kelen bɛɛ kan, aw bɛ baara kɛ ni .table-responsivetabali ye min bɛ wuli ka taa a fɛ.

# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili Selili
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint kɛrɛnkɛrɛnnen

Baara kɛ .table-responsive{-sm|-md|-lg|-xl|-xxl}i n’a fɔ a mago bɛ cogo min na walasa ka jaabi tabali dilan fo ka se kariyɔrɔ kɛrɛnkɛrɛnnen dɔ ma. Ka bɔ o kariyɔrɔ la ka taa san fɛ, tabali bɛna kɛ cogo la min bɛ kɛ cogo la, wa a tɛna wuli ka taa a fɛ.

O tabali ninnu bɛ se ka kɛ i n’a fɔ u karilen don fo u jaabi cogoyaw ka baara kɛ filɛlikɛyɔrɔw bonya kɛrɛnkɛrɛnnenw na.

# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili
<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 ye

Yɛlɛma-yɛlɛmaw

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

Bukulu

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

Ka kɛɲɛ ni mɔgɔw sago ye

  • Factor variables ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) bɛ kɛ ka danfara dɔn tabali fɛnɲɛnamafagalanw na.
  • Ka fara yeelen & dibi tabali suguyaw kan, barokun kulɛriw bɛ yeelen bɔ $table-bg-levelfɛn caman sɛgɛsɛgɛli fɛ.