in English

Bamesa

Mikanda mpe bandakisa mpo na opt-in styling ya ba tableaux (na kotalaka bosaleli na yango mingi na ba plugins ya JavaScript) na Bootstrap.

Na lokasa oyo

Botali ya mozindo

Na ntina ya bosaleli mingi ya <table>biloko na kati ya ba widgets ya bato mosusu lokola ba calendriers mpe ba pickers ya mikolo, ba tableaux ya Bootstrap ezali opt-in . Bakisa classe ya base .tablena nionso <table>, sima extend na ba classes na biso ya modificateur optionnel to ba styles personnalisés. Ba styles nionso ya tableau e hériter te na Bootstrap, elingi koloba ba tableaux nionso oyo ekangami ekoki kozala style indépendamment na parent.

Kosalela marquage ya tableau ya moboko mingi, tala ndenge .tableba tableaux -based emonanaka na Bootstrap.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Ba variantes

Salelá bakelasi ya contexte mpo na kopesa langi na ba tableaux, ba lignes ya tableau to ba cellules moko moko.

Kelasi	Motó ya likambo	Motó ya likambo
Mbeba	Selile	Selile
Ya liboso	Selile	Selile
Secondaire	Selile	Selile
Kolonga	Selile	Selile
Likama	Selile	Selile
Likebisi	Selile	Selile
Info	Selile	Selile
Pole	Selile	Selile
Molili	Selile	Selile

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

Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hiddenkelasi.

Bamesa oyo ezali na accent

Milɔngɔ oyo ezali na bansinga

Salelá .table-stripedmpo na kobakisa zebra-striping na molɔngɔ́ nyonso ya mesa na kati ya <tbody>.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Makonzí oyo ezali na bansinga

Salelá .table-striped-columnsmpo na kobakisa zebra-striping na colonne nyonso ya tableau.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Ba classes oyo ekoki pe kobakisama na ba variantes ya tableau:

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Milɔngɔ́ oyo ekoki kobalusama

Bakisa .table-hovermpo na kofungola état ya hover na ba lignes ya tableau na kati ya <tbody>.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Ba lignes oyo ekoki pe kosangana na variante ya ba lignes rayées:

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Ba tableaux ya active

Salá elembo na molɔngɔ ya mesa to selile na kobakisáká .table-activekelasi.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Ba variantes na ba tableaux accents esalaka ndenge nini?

Mpo na ba tableaux accentés ( ba lignes rayées , ba colonnes rayées , ba lignes hoverables , mpe ba tableaux actifs ), tosalelaki mwa ba techniques mpo na kosala ete ba effets oyo esalaka mpo na ba variantes na biso nionso ya tableau :

Tobandi na kotiya fond ya cellule ya tableau na --bs-table-bgpropriété personnalisée. Na sima ba variantes nionso ya tableau etie propriété personnalisée wana pona ko coloriser ba cellules ya tableau. Na ndenge oyo, tokotaka na problème te soki ba couleurs semi-transparentes esalelami lokola ba fond ya table.
Na sima tobakisi elili ya boîte d'inset na ba cellules ya tableau na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);na couche likolo ya nionso oyo elakisami background-color. Lokola tosalelaka spread moko ya monene mpe flou te, couleur ekozala monotone. Lokola --bs-table-accent-bgezali unset par défaut, tozali na ombre ya boîte par défaut te.
Ntango soit .table-striped, .table-striped-columns, .table-hoverto .table-activebakelasi ebakisami, the --bs-table-accent-bgetiamaki na langi ya semitransparent mpo na kosala langi na fond.
Pona variante moko na moko ya tableau, tobimisaka --bs-table-accent-bgcouleur oyo ezali na contraste ya likolo selon couleur wana. Na ndakisa, langi ya accent mpo na .table-primaryezali moindo mingi nzokande .table-darkezali na langi ya accent ya pɛtɛɛ.
Balangi ya makomi mpe ya ndelo esalemi ndenge moko, mpe balangi na yango ezwamaka na ndenge ya libela.

Na sima ya ba coulisses ezo monana boye:

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

Bandelo ya mesa

Bamesa oyo ezali na ndelo

Bakisa .table-borderedmpo na bandelo na ngambo nyonso ya mesa mpe baselile.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Ba utilitaires ya couleur ya bordure ekoki kobakisama pona ko changer ba couleurs:

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Bamesa oyo ezangi bandelo

Bakisa .table-borderlessmpo na mesa oyo ezangi bandelo.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Bamesa ya mikemike

Bakisa .table-smmpo na kosala .tablelisusu compact na kokata cellule nionso paddingna katikati.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Ba diviseurs ya groupe ya table

Bakisa ndelo ya monene, ya molili kati na bituluku ya bamesa— <thead>, <tbody>, mpe <tfoot>—na .table-group-divider. Personnaliser couleur en changeant le border-top-color(oyo tozali kopesa classe ya utilitaire te na tango oyo).

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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>

Alignment ya semba

Ba cellules ya table ya <thead>ezalaka toujours vertical aligné na se. Ba cellules ya tableau na <tbody>hériter alignment na bango na <table>pe ezo aligné na likolo par défaut. Salelá ba classes ya align vertical mpo na ko réaligner esika esengeli.

Motó ya likambo 1	Motó ya likambo 2	Motó ya likambo 3	Motó ya likambo 4
Cellule oyo ezuaka héritage `vertical-align: middle;`na tableau	Cellule oyo ezuaka héritage `vertical-align: middle;`na tableau	Cellule oyo ezuaka héritage `vertical-align: middle;`na tableau	Oyo awa ezali mwa makomi ya esika, oyo ezali na mokano ya kozwa mwa esika ya semba, mpo na kolakisa ndenge oyo alignment vertical esalaka na ba cellules oyo eleki.
Cellule oyo ezuaka héritage `vertical-align: bottom;`na molongo ya tableau	Cellule oyo ezuaka héritage `vertical-align: bottom;`na molongo ya tableau	Cellule oyo ezuaka héritage `vertical-align: bottom;`na molongo ya tableau	Oyo awa ezali mwa makomi ya esika, oyo ezali na mokano ya kozwa mwa esika ya semba, mpo na kolakisa ndenge oyo alignment vertical esalaka na ba cellules oyo eleki.
Cellule oyo ezuaka héritage `vertical-align: middle;`na tableau	Cellule oyo ezuaka héritage `vertical-align: middle;`na tableau	Cellule oyo ezali na molɔngɔ na likoló.	Oyo awa ezali mwa makomi ya esika, oyo ezali na mokano ya kozwa mwa esika ya semba, mpo na kolakisa ndenge oyo alignment vertical esalaka na ba cellules oyo eleki.

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

Kosala zumbu

Ba styles ya ndelo, ba styles ya active, na ba variantes ya tableau e hériter te na ba tableaux encastrés.

# .

Ya liboso

Nsuka

Kosalela

1. 1.

Marko

Otto

@mdo

Motó ya likambo	Motó ya likambo	Motó ya likambo
A	Ya liboso	Nsuka
B. B	Ya liboso	Nsuka
C. C. ya	Ya liboso	Nsuka

Larry, moto oyo azali

Ndɛkɛ yango

@twitter na twitter

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

Ndenge nini kosala zumbu esalaka

Mpo na kopekisa ba styles nionso e fuite na ba tableaux encastrés, tosalelaka selecteur ya combinateur enfant ( >) na CSS na biso. Lokola tosengeli ko cibler ba tds na ths nionso na thead, tbody, na tfoot, sélecteur na biso elingaki komonana kitoko molayi sans yango. Lokola yango, tosalelaka .table > :not(caption) > * > *selecteur oyo ezali komonana plutôt bizarre mpo na ko cibler ba tds mpe ths nionso ya .table, kasi moko te ya ba tableaux encastrés potentiels.

Yeba que soki obakisi <tr>s lokola bana direct ya tableau, ba <tr>oyo ekozala enveloppé na a <tbody>par défaut, na ndenge wana kosala que ba sélecteurs na biso esalaka ndenge ekanamaki.

Anatomie ya nzoto

Motó ya mesa

Ndenge moko na ba tableaux na ba tableaux ya molili, salela ba classes ya modificateur .table-lightto .table-darkpona kosala <thead>s emonana gris clair to foncé.

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry, moto oyo azali	Ndɛkɛ yango	@twitter na twitter

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

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry, moto oyo azali	Ndɛkɛ yango	@twitter na twitter

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

Makolo ya mesa

# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry, moto oyo azali	Ndɛkɛ yango	@twitter na twitter
Na nse ya lokasa	Na nse ya lokasa	Na nse ya lokasa	Na nse ya lokasa

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

Ba captions ya maloba

A <caption>esalaka lokola motó ya likambo mpo na mesa. Esalisaka basaleli oyo bazali na batángi ya écran báluka mesa mpe báyeba makambo oyo ezali kolobela mpe bázwa ekateli soki balingi kotánga yango.

Liste ya ba usagers
# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry ndeke		@twitter na twitter

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

Okoki mpe kotya oyo <caption>ezali likoló ya mesa na .caption-top.

Liste ya ba usagers
# .	Ya liboso	Nsuka	Kosalela
1. 1.	Marko	Otto	@mdo
2. 2	Yakobo	Thornton oyo azali	@mafuta
3	Larry, moto oyo azali	Ndɛkɛ yango	@twitter na twitter

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>

Bamesa oyo ezali kopesa eyano

Ba tableaux oyo ezo répondre epesaka nzela ya ko défiler ba tableaux horizontalement na pete. Salá ete mesa nyonso ezala na eyano na kati ya bisika nyonso ya kotala na kozingaka .tablena .table-responsive. To, pona point de rupture maximum oyo okozala na tableau responsive jusqu'à na kosalelaka .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Kokata/kokata na vertical

Ba tableaux oyo ezo répondre esalaka usage ya overflow-y: hidden, oyo ezo cliper contenus nionso oyo eleki ba bords ya se to ya likolo ya table. Mingimingi, yango ekoki kokata ba menu oyo ezali kokita mpe ba widgets mosusu ya bato mosusu.

Koyanola ntango nyonso

Na kati ya esika nyonso ya kobuka, salelá .table-responsivempo na kosala défilement ya ba tableaux na ndenge ya horizontal.

# .	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo
1. 1.	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
2. 2	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
3	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile

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

Point de rupture spécifique

Salelá .table-responsive{-sm|-md|-lg|-xl|-xxl}ndenge esengeli mpo na kosala ba tableaux oyo ezo répondre tii na point de rupture moko boye. Kobanda na point de rupture wana mpe likolo, tableau eko se comporter normalement mpe eko défiler horizontalement te.

Ba tableaux oyo ekoki komonana ebukani tii tango ba styles na yango ya réponse ekosalema na ba largeurs spécifiques ya port de vue.

# .	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo
1. 1.	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
2. 2	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
3	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile

# .	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo
1. 1.	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
2. 2	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
3	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile

# .	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo
1. 1.	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
2. 2	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
3	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile

# .	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo
1. 1.	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
2. 2	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
3	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile

# .	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo
1. 1.	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
2. 2	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
3	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile

# .	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo	Motó ya likambo
1. 1.	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
2. 2	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile
3	Selile	Selile	Selile	Selile	Selile	Selile	Selile	Selile

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

Ba variables oyo ezali

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

Boucle

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

Kosala na ndenge ya moto ye moko

Ba variables ya facteur ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) esalelamaka pona koyeba bokeseni na ba variantes ya tableau.
A part ba variantes ya table ya lumière & noir, ba couleurs ya thème ezo éclaircir na $table-bg-scalevariable.