Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

Amathebula

Amadokhumenti nezibonelo zokukhetha ukungena kwisitayela samathebula (uma kubhekwa ukusetshenziswa kwawo okuvame kakhulu kuma-plugin e-JavaScript) nge-Bootstrap.

Uhlolojikelele

Ngenxa yokusetshenziswa okubanzi kwezinto kuwo wonke amawijethi ezinkampani<table> zangaphandle njengamakhalenda nezikhethi zezinsuku, amathebula e-Bootstrap asengenile . Engeza ikilasi lesisekelo kunoma iyiphi , bese unweba ngamakilasi ethu okushintsha noma izitayela zangokwezifiso. Zonke izitayela zethebula azizuzwa njengefa ku-Bootstrap, okusho ukuthi noma yimaphi amathebula afakwe esidlekeni angenziwa isitayela ngaphandle komzali..table<table>

Usebenzisa imakhaphu yethebula eyisisekelo, nansi indlela .tableamathebula asekelwe ngayo abukeka ngayo ku-Bootstrap.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @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>

Okuhlukile

Sebenzisa amakilasi anomongo ukuze ufake imibala kumathebula, imigqa yethebula noma amaseli ngamanye.

Ikilasi Isihloko Isihloko
Okuzenzakalelayo Iseli Iseli
Okuyinhloko Iseli Iseli
Okwesibili Iseli Iseli
Impumelelo Iseli Iseli
Ingozi Iseli Iseli
Isexwayiso Iseli Iseli
Ulwazi Iseli Iseli
Ukukhanya Iseli Iseli
Kumnyama Iseli Iseli
<!-- 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>
Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .visually-hiddennekilasi.

Amathebula ane-accent

Imigqa enemigqa

Sebenzisa .table-stripedukwengeza i-zebra-striping kunoma yimuphi umugqa wethebula ngaphakathi kwe- <tbody>.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-striped">
  ...
</table>

Lawa makilasi angaphinda angezwe kokuhlukile kwethebula:

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-success table-striped">
  ...
</table>

Imigqa enyakazayo

Engeza .table-hoverukuze unike amandla isimo sokuhambisa phezulu emigqeni yethebula ngaphakathi kwe- <tbody>.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-hover">
  ...
</table>
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-dark table-hover">
  ...
</table>

Le migqa enyakazayo ingabuye ihlanganiswe nokuhluka okunemigqa:

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-striped table-hover">
  ...
</table>

Amathebula asebenzayo

Gqamisa umugqa wethebula noma iseli ngokungeza .table-activeiklasi.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @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>
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @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>

Asebenza kanjani okuhlukile namathebula anezimpawu zokugcizelela?

Kumathebula agxiviziwe ( imigqa enemigqa , imigqa enyakazayo , namathebula asebenzayo ), sisebenzise amasu athile ukuze senze le miphumela isebenze kukho konke okuhlukile kwethebula lethu :

  • Siqala ngokusetha ingemuva leseli letafula elinempahla --bs-table-bgyangokwezifiso. Zonke izinhlobo zethebula zibe sezisetha leyo mpahla yangokwezifiso ukuze ifake umbala kumaseli ethebula. Ngale ndlela, asingeni enkingeni uma imibala ebonisa ngale isetshenziswa njengengemuva letafula.
  • Bese sengeza isithunzi sebhokisi le-inset kumaseli ethebula box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ukuze senze isendlalelo phezu kwanoma iyiphi eshiwo background-color. Ngoba sisebenzisa ukusabalala okukhulu futhi akukho ukufiphala, umbala uzoba monotone. Njengoba --bs-table-accent-bgingasethiwe ngokuzenzakalelayo, asinaso isithunzi sebhokisi esizenzakalelayo.
  • Uma .table-striped, .table-hovernoma .table-activeamakilasi engezwa, --bs-table-accent-bgisethi isethwe kumbala okhanye kancane ukuze yenze umbala ongemuva.
  • Ngokwahluka kwethebula ngalinye, sikhiqiza --bs-table-accent-bgumbala onokugqama okuphezulu kakhulu kuye ngalowo mbala. Isibonelo, umbala we-accent yawo .table-primaryumnyama ngenkathi .table-darkunombala we-accent okhanyayo.
  • Imibala yombhalo neyomngcele ikhiqizwa ngendlela efanayo, futhi imibala yayo izuzwa ngokuzenzakalelayo.

Ngemuva kwezigcawu kubonakala kanje:

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

Imingcele yethebula

Amatafula anemingcele

Engeza .table-borderedimingcele kuzo zonke izinhlangothi zetafula namaseli.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-bordered">
  ...
</table>

Izinsiza zombala womngcele zingangezwa ukushintsha imibala:

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Amathebula angenayo imingcele

Engeza .table-borderlesskutafula elingenayo imingcele.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-borderless">
  ...
</table>
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Amatafula amancane

Engeza .table-smukuze wenze noma iyiphi .tablei-compact kakhudlwana ngokusika wonke amaseli paddingphakathi.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-sm">
  ...
</table>
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-dark table-sm">
  ...
</table>

Ukuqondanisa okuqondile

Amaseli ethebula <thead>okuthi ahlala eqondaniswe mpo phansi. Amaseli ethebula <tbody>athola ukuqondana kwawo <table>futhi aqondaniswe phezulu ngokuzenzakalelayo. Sebenzisa amakilasi okuqondanisa mpo ukuze uhlele kabusha lapho kudingeka.

Isihloko 1 Isihloko 2 Isihloko 3 Isihloko 4
Leli seli lithola ifa vertical-align: middle;kusuka etafuleni Leli seli lithola ifa vertical-align: middle;kusuka etafuleni Leli seli lithola ifa vertical-align: middle;kusuka etafuleni Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
Leli seli lizuza vertical-align: bottom;kumugqa wethebula Leli seli lizuza vertical-align: bottom;kumugqa wethebula Leli seli lizuza vertical-align: bottom;kumugqa wethebula Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
Leli seli lithola ifa vertical-align: middle;kusuka etafuleni Leli seli lithola ifa vertical-align: middle;kusuka etafuleni Leli seli liqondaniswe phezulu. Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
<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>

Ukwenza isidleke

Izitayela zemingcele, izitayela ezisebenzayo, nokuhluka kwethebula akuzuzwa njengefa ngamathebula akhiwe.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
Unhlokweni Unhlokweni Unhlokweni
A Okokuqala Okokugcina
B Okokuqala Okokugcina
C Okokuqala Okokugcina
3 Larry uNyoni @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Indlela yokwenza isidleke isebenza kanjani

Ukuvimbela noma yiziphi izitayela ukuthi zingavuzi ziye kumathebula afakwe esidlekeni, sisebenzisa isikhethi sezingane ( >) ku-CSS yethu. Njengoba sidinga ukukhomba wonke u- tds no - ths ku- thead, tbody, kanye tfoot, isikhethi sethu singabukeka siside kakhulu ngaphandle kwayo. Kanjalo, sisebenzisa .table > :not(caption) > * > *isikhethi esibukeka ngendlela exakile ukuze siqondise wonke amathebula e- td, kodwa awekho amathebula akhiwe esidlekeni.th.table

Qaphela ukuthi uma ungeza <tr>u-s njengabantwana abaqondile betafula, labo <tr>bazogoqwa ngokuthi a <tbody>ngokuzenzakalela, ngaleyo ndlela benze abakhethi bethu basebenze ngendlela ehlosiwe.

I-Anatomy

Ikhanda letafula

Ngokufana namathebula namathebula amnyama, sebenzisa amakilasi okulungisa .table-lightnoma .table-darkukwenza u- <thead>s abonakale ekhanyayo noma empunga emnyama.

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Unyawo lwetafula

# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @twitter
Unyaweni Unyaweni Unyaweni Unyaweni
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Amazwibela

Isebenza <caption>njengesihloko setafula. Isiza abasebenzisi abanezifundi zesikrini ukuthi bathole ithebula futhi baqonde ukuthi limayelana nani futhi banqume ukuthi bafuna ukulifunda yini.

Uhlu lwabasebenzisi
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry Inyoni @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ungakwazi futhi ukubeka <caption>phezu kwetafula nge .caption-top.

Uhlu lwabasebenzisi
# Okokuqala Okokugcina Bamba
1 Maka Otto @mdo
2 uJakobe Thornton @amafutha
3 Larry uNyoni @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>

Amathebula asabelayo

Amathebula aphendulayo avumela amathebula ukuthi asongwe ngokuvundlile kalula. Yenza noma yiliphi ithebula liphendule kuzo zonke izinkundla zokubuka ngokusonga .tablengokuthi .table-responsive. Noma, khetha indawo enkulu yokunqamula lapho ungathola khona ithebula eliphendulayo ngokusebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Ukusika okuqondile/ukunciphisa

Amathebula aphendulayo asebenzisa overflow-y: hiddenokuthi , okusika noma yikuphi okuqukethwe okudlulela ngale kwangaphansi noma imiphetho ephezulu yethebula. Ikakhulukazi, lokhu kunganqamula amamenyu okwehlayo namanye amawijethi ezinkampani zangaphandle.

Ihlale iphendula

Kuwo wonke ama-breakpoint, sebenzisa .table-responsiveamathebula okuskrola avundlile.

# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

I-Breakpoint ethize

Sebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}njengoba kudingeka ukuze udale amathebula asabelayo kuze kufike endaweni ethile yokuhlukana. Kusukela kuleyo ndawo yokuhlukana kuya phezulu, ithebula lizoziphatha ngendlela evamile futhi lingaskroli ngokuvundlile.

Lawa mathebula angase abonakale ephukile kuze kube yilapho izitayela zawo zokusabela zisebenza kububanzi obuthile bokubuka.

# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
<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

Okuguquguqukayo

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

Iluphu

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

Ukwenza ngokwezifiso

  • Izinto eziguquguqukayo ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) isetshenziselwa ukunquma umehluko ezinhlobonhlobo zethebula.
  • Ngaphandle kokwehluka kwethebula elikhanyayo nelimnyama, imibala yetimu ikhanyiswa ukuhlukahluka $table-bg-level.