tabél

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

Dina kaca ieu

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

Tandaan

Otto

@mdo

lulugu	lulugu	lulugu
A	kahiji	Panungtungan
B	kahiji	Panungtungan
C	kahiji	Panungtungan

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.