Awọn tabili

Iwe ati awọn apẹẹrẹ fun ijade-iṣafihan awọn tabili (fifun lilo lilo wọn ni awọn afikun JavaScript) pẹlu Bootstrap.

Lori iwe yi

Akopọ

Nitori lilo awọn <table>eroja kaakiri kọja awọn ẹrọ ailorukọ ẹnikẹta bi awọn kalẹnda ati awọn oluyan ọjọ, awọn tabili Bootstrap ti yọkuro . Ṣafikun kilasi ipilẹ .tablesi eyikeyi <table>, lẹhinna faagun pẹlu awọn kilasi modifier yiyan tabi awọn aza aṣa. Gbogbo awọn aza tabili ni a ko jogun ni Bootstrap, afipamo pe awọn tabili itẹle eyikeyi le jẹ ara ominira lati ọdọ obi.

Lilo isamisi tabili ipilẹ julọ, eyi ni bii awọn .tabletabili orisun ṣe wo ni Bootstrap.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@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>

Awọn iyatọ

Lo awọn kilasi ọrọ-ọrọ si awọn tabili awọ, awọn ori ila tabili tabi awọn sẹẹli kọọkan.

Kilasi	Akori	Akori
Aiyipada	Ẹyin sẹẹli	Ẹyin sẹẹli
Alakoko	Ẹyin sẹẹli	Ẹyin sẹẹli
Atẹle	Ẹyin sẹẹli	Ẹyin sẹẹli
Aseyori	Ẹyin sẹẹli	Ẹyin sẹẹli
Ijamba	Ẹyin sẹẹli	Ẹyin sẹẹli
Ikilo	Ẹyin sẹẹli	Ẹyin sẹẹli
Alaye	Ẹyin sẹẹli	Ẹyin sẹẹli
Imọlẹ	Ẹyin sẹẹli	Ẹyin sẹẹli
Dudu	Ẹyin sẹẹli	Ẹyin sẹẹli

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

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.

Awọn tabili accented

Awọn ori ila ti o ya

Lo .table-stripedlati ṣafikun abila-fikun si ori ila tabili eyikeyi laarin <tbody>.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Awọn ọwọn ṣi kuro

Lo .table-striped-columnslati ṣafikun abila-fikun si eyikeyi ọwọn tabili.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Awọn kilasi wọnyi tun le ṣafikun si awọn iyatọ tabili:

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Hoverable awọn ori ila

Fikun -un .table-hoverlati mu ipo fifin ṣiṣẹ lori awọn ori ila tabili laarin faili kan <tbody>.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Awọn ori ila yiyi le tun ni idapo pẹlu iyatọ awọn ori ila ila:

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Awọn tabili ti nṣiṣe lọwọ

Ṣe afihan laini tabili tabi sẹẹli nipa fifi .table-activekilasi kun.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@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>

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@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>

Bawo ni awọn iyatọ ati awọn tabili asẹnti ṣiṣẹ?

Fun awọn tabili asẹnti ( awọn ori ila ila , awọn ọwọn didan , awọn ori ila ti o fẹẹrẹ , ati awọn tabili ti nṣiṣe lọwọ ), a lo diẹ ninu awọn ilana lati jẹ ki awọn ipa wọnyi ṣiṣẹ fun gbogbo awọn iyatọ tabili wa :

A bẹrẹ nipa siseto abẹlẹ ti sẹẹli tabili pẹlu --bs-table-bgohun-ini aṣa. Gbogbo awọn iyatọ tabili lẹhinna ṣeto ohun-ini aṣa yẹn lati ṣe awọ awọn sẹẹli tabili. Ni ọna yi, a ko gba sinu wahala ti o ba ti ologbele-sihin awọn awọ ti wa ni lo bi tabili backgrounds.
Lẹhinna a ṣafikun ojiji apoti inset lori awọn sẹẹli tabili pẹlu box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lati fẹlẹfẹlẹ lori eyikeyi pato background-color. Nitoripe a lo itankale nla ati pe ko si blur, awọ yoo jẹ monotone. Niwọn igba --bs-table-accent-bgti ko ṣeto nipasẹ aiyipada, a ko ni ojiji apoti aiyipada.
Nigbati boya .table-striped, .table-striped-columns, .table-hovertabi .table-activeawọn kilasi ti wa ni afikun, --bs-table-accent-bgti ṣeto si awọ ologbeletransparent lati ṣe awọ abẹlẹ.
Fun iyatọ tabili kọọkan, a ṣe ina --bs-table-accent-bgawọ kan pẹlu iyatọ ti o ga julọ ti o da lori awọ yẹn. Fun apẹẹrẹ, awọ asẹnti fun .table-primarydudu nigba .table-darkti o ni awọ asẹnti fẹẹrẹfẹ.
Ọrọ ati awọn awọ aala jẹ ipilẹṣẹ ni ọna kanna, ati pe awọn awọ wọn jẹ jogun nipasẹ aiyipada.

Lẹhin awọn oju iṣẹlẹ o dabi eleyi:

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

Table aala

Awọn tabili aala

Fi kun .table-borderedfun awọn aala lori gbogbo awọn ẹgbẹ ti tabili ati awọn sẹẹli.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Awọn ohun elo awọ aala le ṣafikun lati yi awọn awọ pada:

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Awọn tabili laisi awọn aala

Fi kun .table-borderlessfun tabili laisi awọn aala.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Awọn tabili kekere

Fikun -un .table-smlati ṣe .tableiwapọ diẹ sii nipa gige gbogbo sẹẹli paddingni idaji.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

Tabili Ẹgbẹ dividers

Ṣafikun aala ti o nipon, dudu ju laarin awọn ẹgbẹ tabili — <thead>, <tbody>, ati <tfoot>— pẹlu .table-group-divider. Ṣe akanṣe awọ naa nipa yiyipada border-top-color(eyiti a ko pese lọwọlọwọ kilasi ohun elo fun ni akoko yii).

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@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>

Titete inaro

Awọn sẹẹli tabili ti <thead>wa ni inaro nigbagbogbo ni ibamu si isalẹ. Awọn sẹẹli tabili ni <tbody>jogun titete wọn lati <table>ati pe wọn ṣe deede si oke nipasẹ aiyipada. Lo awọn kilasi isọpọ inaro lati tun ṣe deede ni ibiti o nilo.

Akọle 1	Akole 2	Akole 3	Akole 4
Yi sẹẹli jogun `vertical-align: middle;`lati tabili	Yi sẹẹli jogun `vertical-align: middle;`lati tabili	Yi sẹẹli jogun `vertical-align: middle;`lati tabili	Eyi ni diẹ ninu ọrọ ibi-aye, ti a pinnu lati gba diẹ ninu aaye inaro, lati ṣe afihan bii titete inaro ṣe n ṣiṣẹ ninu awọn sẹẹli ti o ṣaju.
Yi cell jogun `vertical-align: bottom;`lati tabili kana	Yi cell jogun `vertical-align: bottom;`lati tabili kana	Yi cell jogun `vertical-align: bottom;`lati tabili kana	Eyi ni diẹ ninu ọrọ ibi-aye, ti a pinnu lati gba diẹ ninu aaye inaro, lati ṣe afihan bii titete inaro ṣe n ṣiṣẹ ninu awọn sẹẹli ti o ṣaju.
Yi sẹẹli jogun `vertical-align: middle;`lati tabili	Yi sẹẹli jogun `vertical-align: middle;`lati tabili	Seli yi wa ni deedee si oke.	Eyi ni diẹ ninu ọrọ ibi-aye, ti a pinnu lati gba diẹ ninu aaye inaro, lati ṣe afihan bii titete inaro ṣe n ṣiṣẹ ninu awọn sẹẹli ti o ṣaju.

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

Itẹle

Awọn ara aala, awọn aza ti nṣiṣe lọwọ, ati awọn iyatọ tabili ni a ko jogun nipasẹ awọn tabili itẹ-ẹiyẹ.

Akoko

Ikẹhin

Samisi

Otto

@mdo

Akọsori	Akọsori	Akọsori
A	Akoko	Ikẹhin
B	Akoko	Ikẹhin
C	Akoko	Ikẹhin

Larry

Eye

@twitter

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

Bawo ni itẹ-ẹiyẹ ṣiṣẹ

Lati yago fun eyikeyi ara lati jijo si awọn tabili itẹ-ẹiyẹ, a lo ọmọ akojọpọ ( >) oluyan ninu CSS wa. Niwọn igba ti a nilo lati fojusi gbogbo awọn tds ati ths ninu thead, tbody, ati tfoot, oluyan wa yoo dabi lẹwa gun laisi rẹ. Bi iru bẹẹ, a lo .table > :not(caption) > * > *oluyan yiyan ti ko dara lati dojukọ gbogbo awọn tds ati ths ti .table, ṣugbọn ko si eyikeyi awọn tabili itẹle ti o pọju.

Ṣe akiyesi pe ti o ba ṣafikun <tr>s bi awọn ọmọde taara ti tabili kan, awọn <tr>naa yoo we sinu <tbody>aiyipada, nitorinaa jẹ ki awọn yiyan wa ṣiṣẹ bi a ti pinnu.

Anatomi

ori tabili

Iru awọn tabili ati awọn tabili dudu, lo awọn kilasi modifier .table-lighttabi .table-darklati jẹ ki <thead>s han ina tabi grẹy dudu.

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry	Eye	@twitter

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

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry	Eye	@twitter

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

Tabili ẹsẹ

#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry	Eye	@twitter
Ẹlẹsẹ	Ẹlẹsẹ	Ẹlẹsẹ	Ẹlẹsẹ

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

Awọn akọle

Awọn <caption>iṣẹ kan bi akọle fun tabili kan. O ṣe iranlọwọ fun awọn olumulo pẹlu awọn oluka iboju lati wa tabili kan ati loye ohun ti o jẹ nipa ati pinnu boya wọn fẹ ka.

Akojọ ti awọn olumulo
#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry Eye		@twitter

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

O tun le fi awọn <caption>lori oke ti awọn tabili pẹlu .caption-top.

Akojọ ti awọn olumulo
#	Akoko	Ikẹhin	Mu
1	Samisi	Otto	@mdo
2	Jakobu	Thornton	@sanra
3	Larry	Eye	@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>

Awọn tabili idahun

Awọn tabili idahun gba awọn tabili laaye lati yi lọ ni ita pẹlu irọrun. Jẹ ki tabili eyikeyi ṣe idahun kọja gbogbo awọn ibudo wiwo nipa fifi ipari si .tablepẹlu .table-responsive. Tabi, mu aaye isinmi ti o pọju pẹlu eyiti o le ni tabili idahun si nipa lilo .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Inaro clipping/truncation

Awọn tabili idahun ṣe lilo overflow-y: hidden, eyi ti awọn agekuru kuro ni eyikeyi akoonu ti o lọ kọja isalẹ tabi awọn egbegbe oke ti tabili. Ni pataki, eyi le ge awọn akojọ aṣayan silẹ ati awọn ẹrọ ailorukọ ẹnikẹta miiran.

Nigbagbogbo idahun

Kọja gbogbo aaye fifọ, lo .table-responsivefun awọn tabili lilọ kiri ni petele.

#	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori
1	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
2	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
3	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli

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

Breakpoint pato

Lo .table-responsive{-sm|-md|-lg|-xl|-xxl}bi o ṣe nilo lati ṣẹda awọn tabili idahun si aaye fifọ kan pato. Lati aaye fifọ yẹn ati si oke, tabili yoo huwa deede kii yoo yi lọ ni ita.

Awọn tabili wọnyi le han fifọ titi awọn aza idahun wọn yoo waye ni awọn iwọn iwoye kan pato.

#	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori
1	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
2	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
3	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli

#	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori
1	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
2	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
3	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli

#	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori
1	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
2	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
3	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli

#	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori
1	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
2	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
3	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli

#	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori
1	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
2	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
3	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli

#	Akori	Akori	Akori	Akori	Akori	Akori	Akori	Akori
1	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
2	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli
3	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli	Ẹyin sẹẹli

<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

Awọn oniyipada

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

Loop

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

Isọdi ara ẹni

Awọn oniyipada ifosiwewe ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ni a lo lati pinnu iyatọ ninu awọn iyatọ tabili.
Yato si ina & awọn iyatọ tabili dudu, awọn awọ akori jẹ imọlẹ nipasẹ $table-bg-scaleoniyipada.