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.

Nin ɲɛ in kan

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>

Kolonw sɛrɛkiliw

Aw bɛ baara kɛ ni .table-striped-columnsa ye walasa ka zebra-striping fara tabali kulu o kulu 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-striped-columns">
  ...
</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-dark table-striped-columns">
  ...
</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>

# 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-columns">
  ...
</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 jirisun minnu bɛ Se ka jɛgɛn, olu fana bɛ Se ka Fàra ɲɔgɔn kan ni jirisunw cogoya sɛrɛkiliw 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ɛ ni sɛrɛkili ye ( jirisunw , 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-striped-columns, .table-hoverwalima .table-activekalasi dɔw farala ɲɔgɔn kan, the --bs-table-accent-bgbɛ sigi kulɛri tilayɔrɔba dɔ 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));
    $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);
  }
}

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>

Tabali kulu tila-tilabagaw

Aw bɛ dan dɔ fara a kan min ka bon, min ka di tabali kuluw cɛ— <thead>, <tbody>, ani <tfoot>—ni .table-group-divider. Kulɛri bɛrɛbɛnni kɛ ni border-top-color(an tɛ nafalan kalan min di sisan nin waati in na) caman cili 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

html ye

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

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 kɔnɔ, an bɛ baara kɛ ni denmisɛnninw ka ɲɔgɔndan ( >) 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 fana ka a bila <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

html ye

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

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-scalefɛn caman sɛgɛsɛgɛli fɛ.