Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

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.

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 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-success table-striped">
  ...
</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ọ ṣiṣafihan:

# 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 ori ila ti o le gbe , 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-hovertabi .table-activeawọn kilasi ti wa ni afikun, --bs-table-accent-bga ṣeto si awọ olominira 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));

    --#{$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));
  }
}

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>

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 Mu
1 Samisi Otto @mdo
Akọsori Akọsori Akọsori
A Akoko Ikẹhin
B Akoko Ikẹhin
C Akoko Ikẹhin
3 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
<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:                 $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%;

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