Luncat ka eusi utama Luncat ka navigasi docs
in English

tabél

Dokuméntasi sareng conto pikeun milih gaya tabel (dibikeun dianggo dina plugins JavaScript) sareng Bootstrap.

Ihtisar

Alatan pamakean <table>elemen anu nyebar dina widget pihak katilu sapertos almenak sareng pamilih tanggal, tabel Bootstrap dipilih . Tambihkeun kelas dasar .tablekana naon waé <table>, teras manjangkeun ku kelas modifier opsional atanapi gaya khusus. Sadaya gaya tabel teu diwariskeun dina Bootstrap, hartina sagala tabel nested bisa gaya bebas ti indungna.

Nganggo markup tabel anu paling dasar, ieu kumaha .tabletabel dumasar kana Bootstrap.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @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>

Varian

Anggo kelas kontekstual pikeun ngawarnaan tabel, baris tabel atanapi sél individu.

Kelas Judul Judul
Default Sél Sél
primér Sél Sél
Sekunder Sél Sél
Kasuksésan Sél Sél
Bahaya Sél Sél
Awas Sél Sél
Inpo Sél Sél
Caang Sél Sél
Poek Sél Sél
<!-- 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>
Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hiddenkelas.

Méja beraksen

Jajaran belang

Paké .table-stripedpikeun nambahkeun zebra-striping kana sagala baris tabel dina <tbody>.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-striped">
  ...
</table>

Kelas ieu ogé bisa ditambahkeun kana varian tabel:

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-dark table-striped">
  ...
</table>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-success table-striped">
  ...
</table>

Jajaran hoverable

Tambahkeun .table-hoverpikeun ngaktipkeun kaayaan hover dina baris tabel dina hiji <tbody>.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-hover">
  ...
</table>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-dark table-hover">
  ...
</table>

Baris hoverable ieu ogé bisa digabungkeun jeung varian belang:

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-striped table-hover">
  ...
</table>

tabél aktip

Nyorot baris tabel atawa sél ku nambahkeun .table-activekelas.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @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>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @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>

Kumaha varian sareng tabel beraksen dianggo?

Pikeun tabel beraksen ( baris belang , baris hoverable , sareng tabel aktip ), kami nganggo sababaraha téknik pikeun ngajantenkeun épék ieu tiasa dianggo pikeun sadaya varian méja kami :

  • Urang mimitian ku netepkeun latar tukang sél tabel kalawan --bs-table-bgsipat custom. Sadaya varian méja teras nyetél éta sipat khusus pikeun ngawarnaan sél méja. Ku cara ieu, urang teu meunang masalah lamun kelir semi-transparan dipaké salaku backgrounds méja.
  • Teras urang tambahkeun bayangan kotak inset dina sél méja kalayan box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lapisan dina luhureun naon waé anu ditangtukeun background-color. Kusabab kami nganggo panyebaran anu ageung sareng henteu kabur, warnana bakal monoton. Kusabab --bs-table-accent-bgieu unset sacara standar, urang teu boga kalangkang kotak standar.
  • Nalika boh .table-striped, .table-hoveratanapi .table-activekelas ditambahkeun, éta --bs-table-accent-bgdisetel ka warna semitransparan pikeun ngawarnaan latar.
  • Pikeun unggal varian méja, kami ngahasilkeun --bs-table-accent-bgwarna anu kontrasna pangluhurna gumantung kana warna éta. Contona, warna aksen keur .table-primaryleuwih poek bari .table-darkboga warna aksen nu leuwih hampang.
  • Warna téks sareng wates dihasilkeun ku cara anu sami, sareng warnana diwariskeun sacara standar.

Di balik layar sigana kieu:

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

wates méja

tabél wates

Tambahkeun .table-borderedpikeun wates dina sagala sisi tabel sarta sél.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-bordered">
  ...
</table>

Utiliti warna wates tiasa ditambah pikeun ngarobih warna:

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Méja tanpa wates

Tambahkeun .table-borderlesspikeun méja tanpa wates.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-borderless">
  ...
</table>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-dark table-borderless">
  ...
</table>

méja leutik

Tambahkeun .table-smsangkan .tableleuwih kompak ku motong sakabéh sél paddingdina satengah.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-sm">
  ...
</table>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-dark table-sm">
  ...
</table>

alignment nangtung

Sél méja tina <thead>sok vertikal dijajarkeun ka handap. Sél tabel dina <tbody>inherit alignment maranéhanana <table>sarta dijajarkeun ka luhur sacara standar. Anggo kelas align nangtung pikeun align deui upami diperyogikeun.

Judul 1 Judul 2 Judul 3 Judul 4
Sél ieu inheits vertical-align: middle;tina méja Sél ieu inheits vertical-align: middle;tina méja Sél ieu inheits vertical-align: middle;tina méja Ieu di dieu aya sababaraha téks pananda tempat, dimaksudkeun pikeun nyéépkeun rohangan nangtung anu lumayan, pikeun nunjukkeun kumaha alignment nangtung dina sél sateuacana.
Sél ieu inherits vertical-align: bottom;ti baris tabel Sél ieu inherits vertical-align: bottom;ti baris tabel Sél ieu inherits vertical-align: bottom;ti baris tabel Ieu di dieu aya sababaraha téks pananda tempat, dimaksudkeun pikeun nyéépkeun rohangan nangtung anu lumayan, pikeun nunjukkeun kumaha alignment nangtung dina sél sateuacana.
Sél ieu inheits vertical-align: middle;tina méja Sél ieu inheits vertical-align: middle;tina méja Sél ieu dijajarkeun ka luhur. Ieu di dieu aya sababaraha téks pananda tempat, dimaksudkeun pikeun nyéépkeun rohangan nangtung anu lumayan, pikeun nunjukkeun kumaha alignment nangtung dina sél sateuacana.
<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>

Nyarang

Gaya wates, gaya aktip, sareng varian tabel henteu diwariskeun ku tabel nested.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
lulugu lulugu lulugu
A kahiji Panungtungan
B kahiji Panungtungan
C kahiji Panungtungan
3 Larry manuk @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kumaha nyarang jalan

Pikeun nyegah sagala gaya bocor kana tabel nested, kami nganggo child combinator ( >) pamilih dina CSS kami. Kusabab urang kudu nargétkeun sakabéh tds jeung ths dina thead, tbody, jeung tfoot, pamilih urang bakal kasampak geulis lila tanpa eta. Sapertos kitu, kami nganggo pamilih anu rada ganjil .table > :not(caption) > * > *pikeun nargétkeun sadayana tds sareng ths tina .table, tapi henteu aya tabel anu nested poténsial.

Catet yén upami anjeun nambihan <tr>s salaku murangkalih langsung tina méja, éta <tr>bakal dibungkus sacara <tbody>standar, sahingga pamilih urang tiasa dianggo sakumaha anu dimaksud.

Anatomi

Sirah méja

Sarupa jeung tabel sarta tabel poék, make kelas modifier .table-lightatawa .table-darknyieun <thead>s némbongan lampu atawa kulawu poék.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry manuk @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry manuk @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Suku méja

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry manuk @twitter
Footer Footer Footer Footer
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Captions

A <caption>fungsi kawas judul pikeun méja. Éta ngabantosan pangguna anu maca layar pikeun mendakan méja sareng ngartos naon éta sareng mutuskeun upami aranjeunna hoyong maca éta.

Daptar pamaké
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry Manuk @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Anjeun oge bisa nempatkeun <caption>dina luhureun tabel kalawan .caption-top.

Daptar pamaké
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry manuk @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>

tabél responsif

Tabel responsif ngamungkinkeun tabel pikeun ngagulung sacara horisontal kalayan gampang. Jieun tabel naon responsif peuntas sagala viewports ku wrapping a .tablekalawan .table-responsive. Atanapi, pilih titik putus maksimal pikeun ngagaduhan méja responsif ku ngagunakeun .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Clipping nangtung / truncation

tabél responsif ngagunakeun overflow-y: hidden, nu klip kaluar sagala eusi nu mana saluareun edges handap atawa luhur tabél. Khususna, ieu tiasa motong ménu lungsur sareng widget pihak katilu anu sanés.

Salawasna responsif

Di sakuliah unggal breakpoint, pake .table-responsivepikeun tabel ngagulung horizontal.

# Judul Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél Sél
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint husus

Paké.table-responsive{-sm|-md|-lg|-xl|-xxl} sakumaha diperlukeun pikeun nyieun tabel responsif nepi ka breakpoint tinangtu. Ti breakpoint éta sarta nepi, tabél bakal kalakuanana normal teu ngagulung horisontal.

Tabél ieu tiasa katingali rusak dugi ka gaya responsifna dilarapkeun dina lebar viewport khusus.

# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél
<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

Variabel

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

Gelung

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

Nyaluyukeun

  • Variabel faktor ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) digunakeun pikeun nangtukeun kontras dina varian tabel.
  • Salian ti varian méja terang & poék, warna téma diémutan ku $table-bg-levelvariabel.