Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

Tebụl

Akwụkwọ na ihe atụ maka ịkebe ịke tebụl (nyere ha na-ejikarị na Javascript plugins) na Bootstrap.

Nchịkọta

N'ihi ojiji nke ihe n'ofe wijetị ndị ọzọ dị ka kalenda na ndị na- ahọrọ<table> ụbọchị, tebụl Bootstrap abanyela . Tinye klas isi na nke ọ bụla , wee gbasaa na klas mgbanwe nhọrọ anyị ma ọ bụ ụdị omenala. A naghị eketa ụdị tebụl niile na Bootstrap, nke pụtara na enwere ike ịhazi tebụl akwụrụ ọ bụla n'adabereghị na nne ma ọ bụ nna..table<table>

N'iji akara nrịbama tebụl kachasị, nke a bụ ka .tabletebụl dabere na Bootstrap.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>

Ụdị dị iche iche

Jiri klaasị gburugburu mee ka tebụl, ahịrị tebụl ma ọ bụ sel dị iche iche agba agba.

Klas Isi Isi
Ọdabara Cell Cell
Isi Cell Cell
Secondary Cell Cell
Ihe ịga nke ọma Cell Cell
Ihe egwu Cell Cell
Ịdọ aka ná ntị Cell Cell
Ozi Cell Cell
Ìhè Cell Cell
Ọchịchịrị Cell Cell
<!-- 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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hiddenklaasị.

Tebụl agbadoro anya

Ahịrị ndị dọwara adọwa

Jiri .table-stripedtinye eriri zebra na ahịrị tebụl ọ bụla n'ime <tbody>.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-striped">
  ...
</table>

Enwere ike ịgbakwunye klas ndị a na ụdị tebụl:

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-success table-striped">
  ...
</table>

Ahịrị ndị nwere ike imegharị

Tinye .table-hoveriji mee ka ọnọdụ hover na ahịrị tebụl n'ime a <tbody>.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-hover">
  ...
</table>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-dark table-hover">
  ...
</table>

Enwere ike ijikọ ahịrị ndị a nwere ike ịnyagharị na ụdị nke nwere eriri:

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-striped table-hover">
  ...
</table>

Tebụl na-arụ ọrụ

Mee ka ahịrị okpokoro ma ọ bụ cell pụta ìhè site na ịgbakwunye otu .table-activeklas.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>

Kedu ka ụdị dị iche iche na tebụl accented si arụ ọrụ?

Maka tebụl ndị nwere ụda olu ( ahịrị ndị nwere akara , ahịrị ndị nwere ike ịgbagharị , na tebụl arụ ọrụ ), anyị jiri usoro ụfọdụ mee ka mmetụta ndị a rụọ ọrụ maka ụdị tebụl anyị niile :

  • Anyị na-amalite site na ịtọ ndabere nke cell table na ihe --bs-table-bgonwunwe omenala. Ọdịiche dị iche iche nke tebụl wee dozie akụrụngwa omenala ahụ iji mee ka mkpụrụ ndụ tebụl dị agba. N'ụzọ dị otú a, anyị anaghị enweta nsogbu ma ọ bụrụ na-eji ọkara transperent agba dị ka okpokoro ndabere.
  • Mgbe ahụ, anyị na-agbakwunye inset igbe onyinyo na tebụl cell na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);oyi akwa n'elu nke ọ bụla akọwapụtara background-color. N'ihi na anyị na-eji nnukwu mgbasa na enweghị ntụpọ, agba ga-abụ monotone. Ebe ọ --bs-table-accent-bgbụ na edoghị ya na ndabara, anyị enweghị onyinyo igbe ndabara.
  • Mgbe agbakwunyere otu .table-striped, .table-hoverma ọ bụ .table-activeklaasị, --bs-table-accent-bga na-edobe ya ka ọ bụrụ agba ọkara transperent iji mee ka ndabere ya dị agba.
  • Maka ụdị tebụl ọ bụla, anyị na-emepụta --bs-table-accent-bgagba nwere ọdịiche kachasị elu dabere na agba ahụ. Dịka ọmụmaatụ, agba ụda olu maka .table-primaryna-agba ọchịchịrị ka ọ .table-darknwere agba ụda olu dị ọkụ.
  • A na-emepụta agba ederede na oke oke n'otu ụzọ ahụ, a na-eketakwa agba ha na ndabara.

N'azụ ihe nkiri a dị ka nke a:

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

Oke okpokoro

Tebụl gbara oke ókè

Tinye .table-borderedmaka oke n'akụkụ niile nke tebụl na sel.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-bordered">
  ...
</table>

Enwere ike ịgbakwunye akụrụngwa agba oke ala iji gbanwee agba :

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Tebụl na-enweghị oke

Tinye .table-borderlessmaka tebụl na-enweghị oke.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-borderless">
  ...
</table>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Obere tebụl

Tinye .table-smka ọ .tablebụrụ kọmpat ọzọ site n'ibibi cell niile paddingna ọkara.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-sm">
  ...
</table>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-dark table-sm">
  ...
</table>

Nhazi kwụ ọtọ

Selụ okpokoro nke <thead>na-adakọrịrị n'ala ala. Selụ okpokoro nọ na <tbody>-eketa nhazigharị ha site <table>na ndabara na-adaba n'elu. Jiri klaasị kwụ n'ahịrị kwụ n'ahịrị ka meziekwa ebe achọrọ ya.

Isi nke 1 Isi nke 2 Isi nke 3 Isi nke 4
Nke a cell ketara vertical-align: middle;na tebụl Nke a cell ketara vertical-align: middle;na tebụl Nke a cell ketara vertical-align: middle;na tebụl Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
Nke a cell na-eketa vertical-align: bottom;n'ahịrị okpokoro Nke a cell na-eketa vertical-align: bottom;n'ahịrị okpokoro Nke a cell na-eketa vertical-align: bottom;n'ahịrị okpokoro Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
Nke a cell ketara vertical-align: middle;na tebụl Nke a cell ketara vertical-align: middle;na tebụl A kwadoro cell a n'elu. Nke a bụ ụfọdụ ederede idobe, nke e bu n'obi were obere oghere kwụ ọtọ, iji gosi ka nkwekọ kwụ ọtọ si arụ ọrụ na sel ndị bu ụzọ.
<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>

Akwu

Ụdị oke ala, ụdị na-arụsi ọrụ ike, na ụdị tebụl anaghị eketa site na tebụl akwụ ụgwọ.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
nkụnye eji isi mee nkụnye eji isi mee nkụnye eji isi mee
A Mbụ Ikpeazụ
B Mbụ Ikpeazụ
C Mbụ Ikpeazụ
3 Larry Nnụnụ ahụ @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kedu ka akwụ ụgwọ si arụ ọrụ

Iji gbochie ụdị ọ bụla ịdaba na tebụl akwụkwụ, anyị na-eji ihe nchịkọta ụmụaka ( >) na CSS anyị. Ebe ọ bụ na anyị kwesịrị ilekwasị anya na tds na ths niile dị na thead, tbody, na tfoot, onye nhọpụta anyị ga-adị ogologo ogologo na-enweghị ya. Dị ka nke a, anyị na-eji onye na-ahọrọ ihe na-adịghị ahụkebe .table > :not(caption) > * > *iji gbado anya tds na ths nke s niile .table, mana ọ nweghị tebụl ọ bụla nwere ike ime.

Rịba ama na ọ bụrụ na ị gbakwunye <tr>s dị ka ụmụaka kpọmkwem nke tebụl, a <tr>ga-ekekọta <tbody>ndị ahụ na ndabara, si otú a na-eme ka ndị na-ahọrọ anyị rụọ ọrụ dịka e bu n'obi.

Anatomi

Isi tebụl

Yiri tebụl na tebụl gbara ọchịchịrị, jiri klaasị modifier .table-lightma ọ bụ .table-darkmee ka <thead>s yie ìhè ma ọ bụ isi awọ gbara ọchịchịrị.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ụkwụ okpokoro

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @twitter
Onye n'okpuru Onye n'okpuru Onye n'okpuru Onye n'okpuru
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Nkọwa okwu

A <caption>na-arụ ọrụ dị ka isi maka tebụl. Ọ na-enyere ndị ọrụ na ndị na-agụ ihuenyo aka ịchọta tebụl ma ghọta ihe ọ bụ ma kpebie ma ha chọrọ ịgụ ya.

Ndepụta ndị ọrụ
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ị nwekwara ike tinye <caption>n'elu tebụl na .caption-top.

Ndepụta ndị ọrụ
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @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>

Tebụl na-anabata

Tebụl ndị na-anabata ihe na-enye ohere ka a pịgharịa tebụl n'ahịrị n'ụzọ dị mfe. Mee ka tebụl ọ bụla na-anabata n'ofe ebe nlele niile site na .tableiji .table-responsive. Ma ọ bụ, họrọ ebe nkwụsịtụ kacha nke ị ga-eji nwee tebụl na-anabata ya site na iji .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Mkpọchi/ mkpọtu kwụ ọtọ

Tebụl na-anabata ihe na-eji overflow-y: hidden, nke na-ewepụ ọdịnaya ọ bụla na-agafe n'akụkụ ala ma ọ bụ elu nke tebụl. Karịsịa, nke a nwere ike ihichapụ menus dropdown na wijetị ndị ọzọ.

Na-anabata mgbe niile

N'ofe ebe nkwụsịtụ ọ bụla, jiri .table-responsivemaka tebụl mpịakọta kwụ ọtọ.

# Isi Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint kpọmkwem

Jiri .table-responsive{-sm|-md|-lg|-xl|-xxl}dị ka ọ dị mkpa iji mepụta tebụl na-anabata ihe ruo otu ebe nkwụsịtụ. Site n'ebe nkwụsịtụ ahụ na elu, tebụl ga-akpa àgwà ka ọ na-adịghị pịgharịa na kehoraizin.

Tebụl ndị a nwere ike ịdị ka agbajiri agbaji ruo mgbe ụdị anabatara ha na-emetụta na obosara ihe nlele.

# Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
<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

Mgbanwe

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

Nhazi

  • A na-eji mgbanwe mgbanwe ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) iji chọpụta ọdịiche dị na ụdị tebụl.
  • Ewezuga ìhè & ụdị tebụl gbara ọchịchịrị, agba agba agba agba agba agba agba agba agba $table-bg-level.