Lumpat menyang isi utama Lumpat menyang pandhu arah docs
Check
in English

Tabel

Dokumentasi lan conto kanggo milih gaya tabel (diwenehi panggunaan umum ing plugin JavaScript) nganggo Bootstrap.

Ing kaca iki

Ringkesan

Amarga panggunaan <table>unsur sing nyebar ing widget pihak katelu kaya tanggalan lan pemilih tanggal, tabel Bootstrap dipilih . Tambah kelas dasar .tablemenyang sembarang <table>, banjur tambah karo kelas modifier opsional utawa gaya khusus. Kabeh gaya meja ora diwarisake ing Bootstrap, tegese sembarang tabel nested bisa ditata bebas saka wong tuwa.

Nggunakake markup tabel paling dhasar, kene carane .tabletabel basis katon ing Bootstrap.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
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>

Varian

Gunakake kelas kontekstual kanggo werna tabel, baris tabel utawa sel individu.

kelas judhul judhul
Default sel sel
utami sel sel
Sekunder sel sel
Sukses sel sel
bebaya sel sel
Pènget sel sel
Info sel sel
cahya sel sel
Peteng sel sel 
<!-- 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>
Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .visually-hiddenkelas.

Tabel aksen

Larik belang

Gunakake .table-stripedkanggo nambah zebra-striping menyang sembarang baris tabel ing <tbody>.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-striped">
  ...
</table>

Kolom belang

Gunakake .table-striped-columnskanggo nambah zebra-striping menyang sembarang kolom tabel.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-striped-columns">
  ...
</table>

Kelas kasebut uga bisa ditambahake menyang varian tabel:

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-success table-striped">
  ...
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-success table-striped-columns">
  ...
</table>

Larik sing bisa dilebokake

Tambah .table-hoverkanggo ngaktifake status hover ing baris tabel ing a <tbody>.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-hover">
  ...
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Baris sing bisa dilebokake iki uga bisa digabung karo varian baris belang:

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Tabel aktif

Sorot baris utawa sel tabel kanthi nambahake .table-activekelas.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
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>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
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>

Kepiye cara varian lan tabel aksen?

Kanggo tabel aksen ( baris belang , kolom belang , baris hoverable , lan tabel aktif ), kita nggunakake sawetara teknik supaya efek kasebut bisa digunakake kanggo kabeh varian tabel :

  • Kita miwiti kanthi nyetel latar mburi sel tabel kanthi --bs-table-bgproperti khusus. Kabeh varian tabel banjur nyetel properti khusus kasebut kanggo menehi warna sel tabel. Kanthi cara iki, kita ora bakal ngalami alangan yen warna semi-transparan digunakake minangka latar mburi meja.
  • Banjur kita nambah bayangan kothak inset ing sel meja kanthi box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lapisan ing ndhuwur sembarang sing ditemtokake background-color. Amarga kita nggunakake panyebaran ageng lan ora kabur, werna bakal monoton. Amarga --bs-table-accent-bgora disetel kanthi gawan, kita ora duwe bayangan kothak standar.
  • Nalika salah siji .table-striped, .table-striped-columns, .table-hoverutawa .table-activekelas ditambahake, --bs-table-accent-bgdisetel menyang werna semitransparent kanggo colorize latar mburi.
  • Kanggo saben varian tabel, kita ngasilake --bs-table-accent-bgwarna kanthi kontras paling dhuwur gumantung saka warna kasebut. Contone, werna aksen kanggo .table-primaryluwih peteng nalika .table-darknduweni werna aksen sing luwih entheng.
  • Werna teks lan wewatesan digawe kanthi cara sing padha, lan werna kasebut diwarisake kanthi standar.

Ing mburi layar katon kaya iki:

@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));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Wates meja

Tabel wewatesan

Tambah .table-borderedkanggo wates ing kabeh pinggir meja lan sel.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-bordered">
  ...
</table>

Utilitas warna wates bisa ditambahake kanggo ngganti warna:

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Tabel tanpa wates

Tambah .table-borderlesskanggo meja tanpa wates.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-borderless">
  ...
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Tabel cilik

Tambah .table-smdadi .tableluwih kompak kanthi ngethok kabeh sel dadi paddingsetengah.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-sm">
  ...
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Pembagi klompok tabel

Tambah wates sing luwih kandel, luwih peteng ing antarane klompok tabel— <thead>, <tbody>, lan <tfoot>— karo .table-group-divider. Ngatur werna kanthi ngganti border-top-color(sing saiki kita ora nyedhiyani kelas sarana kanggo saiki).

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter
html 
<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 class="table-group-divider">
    <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>

Alignment vertikal

Tabel sel <thead>tansah didadekake siji vertikal ing ngisor. Sèl-sèl tabel ing <tbody>marisi alignment saka <table>lan didadekake siji kanggo ndhuwur minangka standar. Gunakake kelas kempal vertikal kanggo nyelarasake maneh yen perlu.

Heading 1 Heading 2 Judul 3 Judul 4
Sèl iki warisan vertical-align: middle;saka tabel Sèl iki warisan vertical-align: middle;saka tabel Sèl iki warisan vertical-align: middle;saka tabel Iki minangka sawetara teks placeholder, sing dimaksudake kanggo njupuk spasi vertikal sing cukup, kanggo nduduhake cara kerjane keselarasan vertikal ing sel sadurunge.
Sèl iki warisan vertical-align: bottom;saka baris tabel Sèl iki warisan vertical-align: bottom;saka baris tabel Sèl iki warisan vertical-align: bottom;saka baris tabel Iki minangka sawetara teks placeholder, sing dimaksudake kanggo njupuk spasi vertikal sing cukup, kanggo nduduhake cara kerjane keselarasan vertikal ing sel sadurunge.
Sèl iki warisan vertical-align: middle;saka tabel Sèl iki warisan vertical-align: middle;saka tabel Sel iki didadekake siji menyang ndhuwur. Iki minangka sawetara teks placeholder, sing dimaksudake kanggo njupuk spasi vertikal sing cukup, kanggo nduduhake cara kerjane keselarasan vertikal ing sel sadurunge. 
<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 tapel wates, gaya aktif, lan varian tabel ora diwarisake dening tabel bersarang.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
Header Header Header
A Pisanan Pungkasan
B Pisanan Pungkasan
C Pisanan Pungkasan
3 Larry si Manuk @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Carane nesting bisa

Kanggo nyegah gaya apa wae saka bocor menyang tabel bersarang, kita nggunakake >pamilih kombinator anak ( ) ing CSS kita. Awit kita kudu Doel kabeh tds lan ths ing thead, tbody, lan tfoot, pamilih kita bakal katon cantik dawa tanpa iku. .table > :not(caption) > * > *Nalika kuwi, kita nggunakake pamilih looking rodo aneh kanggo Doel kabeh tds lan ths saka .table, nanging ora ana sembarang tabel nested potensial.

Elinga yen sampeyan nambah <tr>s minangka anak langsung saka meja, sing <tr>bakal kebungkus ing <tbody>standar, saéngga pamilih kita bisa digunakake minangka dimaksudaké.

Anatomi

Kepala meja

Kaya karo tabel lan tabel peteng, gunakake kelas modifier .table-lightutawa .table-darknggawe <thead>s katon abu-abu cahya utawa peteng.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Kaki meja

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter
Footer Footer Footer Footer 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Caption

A <caption>fungsi kaya judhul kanggo tabel. Iku mbantu pangguna karo maca layar kanggo nemokake tabel lan ngerti apa iku lan mutusaké apa padha arep maca.

Dhaptar pangguna
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Sampeyan uga bisa sijine <caption>ing ndhuwur meja karo .caption-top.

Dhaptar pangguna
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter
html 
<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>

Tabel responsif

Tabel responsif ngidini tabel bisa digulung kanthi horisontal kanthi gampang. Nggawe tabel responsif ing kabeh viewports kanthi mbungkus .tablekaro .table-responsive. Utawa, pilih breakpoint maksimum sing bisa digunakake kanggo tabel responsif kanthi nggunakake .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Kliping / pemotongan vertikal

Tabel responsif nggunakake overflow-y: hidden, sing ngethok konten sing ngluwihi sisih ngisor utawa ndhuwur meja. Utamane, iki bisa ngilangi menu gulung mudhun lan widget pihak katelu liyane.

Tansah responsif

Ing saben breakpoint, gunakake .table-responsivekanggo nggulung tabel horisontal.

# judhul judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel sel 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint tartamtu

Gunakake .table-responsive{-sm|-md|-lg|-xl|-xxl}yen perlu kanggo nggawe tabel responsif nganti breakpoint tartamtu. Saka breakpoint lan munggah, tabel bakal tumindak normal lan ora nggulung horisontal.

Tabel kasebut bisa uga katon rusak nganti gaya responsif ditrapake ing jembar viewport tartamtu.

# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel 
<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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

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

Ngatur

  • Variabel faktor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) digunakake kanggo nemtokake kontras ing varian tabel.
  • Loro saka varian meja cahya & peteng, werna tema padhang dening $table-bg-scalevariabel.