Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

Meja

Dokumentasi dan contoh untuk penggayaan mengikut serta jadual (memandangkan penggunaan lazimnya dalam pemalam JavaScript) dengan Bootstrap.

Pada halaman ini

Gambaran keseluruhan

Disebabkan oleh penggunaan <table>elemen yang meluas merentas widget pihak ketiga seperti kalendar dan pemilih tarikh, jadual Bootstrap adalah ikut serta . Tambahkan kelas asas .tablekepada mana -mana <table>, kemudian lanjutkan dengan kelas pengubah suai pilihan kami atau gaya tersuai. Semua gaya jadual tidak diwarisi dalam Bootstrap, bermakna mana-mana jadual bersarang boleh digayakan bebas daripada induk.

Menggunakan penanda jadual yang paling asas, berikut ialah cara .tablejadual berasaskan kelihatan dalam Bootstrap.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
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

Gunakan kelas kontekstual untuk mewarnai jadual, baris jadual atau sel individu.

Kelas Tajuk Tajuk
Lalai sel sel
utama sel sel
Menengah sel sel
Kejayaan sel sel
bahaya sel sel
Amaran sel sel
info sel sel
Cahaya sel sel
Gelap 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>
Menyampaikan makna kepada teknologi bantuan

Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hiddenkelas.

Meja beraksen

Barisan berjalur

Gunakan .table-stripeduntuk menambah jalur zebra pada mana-mana baris jadual dalam <tbody>.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-striped">
  ...
</table>

Lajur berjalur

Gunakan .table-striped-columnsuntuk menambah jalur zebra pada mana-mana lajur jadual.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-striped-columns">
  ...
</table>

Kelas ini juga boleh ditambahkan pada varian jadual:

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-success table-striped">
  ...
</table>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-success table-striped-columns">
  ...
</table>

Baris berlegar

Tambahkan .table-hoveruntuk mendayakan keadaan tuding pada baris jadual dalam <tbody>.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-hover">
  ...
</table>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Baris berlegar ini juga boleh digabungkan dengan varian baris berjalur:

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Jadual aktif

Serlahkan baris atau sel jadual dengan menambah .table-activekelas.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
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>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
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>

Bagaimanakah varian dan jadual beraksen berfungsi?

Untuk jadual beraksen ( baris berjalur , lajur berjalur , baris berlegar dan jadual aktif ), kami menggunakan beberapa teknik untuk menjadikan kesan ini berfungsi untuk semua varian jadual kami :

  • Kita mulakan dengan menetapkan latar belakang sel jadual dengan sifat --bs-table-bgtersuai. Semua varian jadual kemudian menetapkan sifat tersuai itu untuk mewarnakan sel jadual. Dengan cara ini, kita tidak akan menghadapi masalah jika warna separa lutsinar digunakan sebagai latar belakang jadual.
  • Kemudian kami menambah bayangan kotak inset pada sel jadual dengan box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ke lapisan di atas mana-mana yang ditentukan background-color. Kerana kami menggunakan hamparan yang besar dan tiada kabur, warna akan menjadi monoton. Oleh kerana --bs-table-accent-bgtidak ditetapkan secara lalai, kami tidak mempunyai bayangan kotak lalai.
  • Apabila sama ada .table-striped, .table-striped-columns, .table-hoveratau .table-activekelas ditambah, --bs-table-accent-bgia ditetapkan kepada warna separa telus untuk mewarnakan latar belakang.
  • Untuk setiap varian jadual, kami menjana --bs-table-accent-bgwarna dengan kontras tertinggi bergantung pada warna tersebut. Contohnya, warna loghat untuk .table-primarylebih gelap manakala .table-darkwarna loghat lebih terang.
  • Warna teks dan sempadan dijana dengan cara yang sama, dan warnanya diwarisi secara lalai.

Di sebalik tabir kelihatan seperti ini:

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

Sempadan meja

Meja bersempadan

Tambahkan .table-bordereduntuk sempadan pada semua sisi jadual dan sel.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-bordered">
  ...
</table>

Utiliti warna sempadan boleh ditambah untuk menukar warna:

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Meja tanpa sempadan

Tambah .table-borderlessuntuk jadual tanpa sempadan.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-borderless">
  ...
</table>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Meja kecil

Tambah .table-smuntuk membuat .tablelebih padat dengan memotong semua sel paddingkepada separuh.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-sm">
  ...
</table>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Pembahagi kumpulan meja

Tambahkan jidar yang lebih tebal, lebih gelap antara kumpulan jadual— <thead>, <tbody>, dan <tfoot>—dengan .table-group-divider. Sesuaikan warna dengan menukar border-top-color(yang kami tidak menyediakan kelas utiliti buat masa ini pada masa ini).

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
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>

Penjajaran menegak

Sel jadual <thead>sentiasa dijajar menegak ke bahagian bawah. Sel jadual dalam <tbody>mewarisi penjajarannya daripada <table>dan dijajarkan ke atas secara lalai. Gunakan kelas penjajaran menegak untuk menjajarkan semula jika perlu.

Tajuk 1 Tajuk 2 Tajuk 3 Tajuk 4
Sel ini mewarisi vertical-align: middle;daripada jadual Sel ini mewarisi vertical-align: middle;daripada jadual Sel ini mewarisi vertical-align: middle;daripada jadual Ini ialah beberapa teks pemegang tempat, bertujuan untuk mengambil sedikit ruang menegak, untuk menunjukkan cara penjajaran menegak berfungsi dalam sel sebelumnya.
Sel ini mewarisi vertical-align: bottom;daripada baris jadual Sel ini mewarisi vertical-align: bottom;daripada baris jadual Sel ini mewarisi vertical-align: bottom;daripada baris jadual Ini ialah beberapa teks pemegang tempat, bertujuan untuk mengambil sedikit ruang menegak, untuk menunjukkan cara penjajaran menegak berfungsi dalam sel sebelumnya.
Sel ini mewarisi vertical-align: middle;daripada jadual Sel ini mewarisi vertical-align: middle;daripada jadual Sel ini dijajarkan ke bahagian atas. Ini ialah beberapa teks pemegang tempat, bertujuan untuk mengambil sedikit ruang menegak, untuk menunjukkan cara penjajaran menegak berfungsi dalam sel sebelumnya. 
<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>

Bersarang

Gaya sempadan, gaya aktif dan varian jadual tidak diwarisi oleh jadual bersarang.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
Kepala Kepala Kepala
A Pertama Terakhir
B Pertama Terakhir
C Pertama Terakhir
3 Larry burung @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Cara bersarang berfungsi

Untuk mengelakkan sebarang gaya daripada bocor ke jadual bersarang, kami menggunakan >pemilih child combinator ( ) dalam CSS kami. Memandangkan kita perlu menyasarkan semua tds dan ths dalam thead, tbody, dan tfoot, pemilih kami akan kelihatan agak lama tanpanya. Oleh itu, kami menggunakan pemilih yang kelihatan agak ganjil .table > :not(caption) > * > *untuk menyasarkan semua tds dan ths .table, tetapi tiada satu pun jadual bersarang yang berpotensi.

Ambil perhatian bahawa jika anda menambah <tr>s sebagai anak langsung sesuatu jadual, <tr>ia akan dibalut secara <tbody>lalai, sekali gus menjadikan pemilih kami berfungsi seperti yang dimaksudkan.

Anatomi

Kepala meja

Sama seperti jadual dan jadual gelap, gunakan kelas pengubah suai .table-lightatau .table-darkuntuk menjadikan <thead>s kelihatan kelabu terang atau gelap.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Kaki meja

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter
Pengaki Pengaki Pengaki Pengaki 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Kapsyen

A <caption>berfungsi seperti tajuk untuk jadual. Ia membantu pengguna dengan pembaca skrin untuk mencari jadual dan memahami perkara itu dan memutuskan sama ada mereka mahu membacanya.

Senarai pengguna
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Anda juga boleh meletakkan <caption>di bahagian atas meja dengan .caption-top.

Senarai pengguna
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @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>

Jadual responsif

Jadual responsif membolehkan jadual ditatal secara mendatar dengan mudah. Jadikan mana-mana jadual responsif merentas semua viewport dengan membalut a .tabledengan .table-responsive. Atau, pilih titik putus maksimum untuk mempunyai jadual responsif dengan menggunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Keratan menegak/pemangkasan

Jadual responsif menggunakan overflow-y: hidden, yang memotong mana-mana kandungan yang melampaui tepi bawah atau atas jadual. Khususnya, ini boleh memotong menu lungsur turun dan widget pihak ketiga yang lain.

Sentiasa responsif

Merentasi setiap titik putus, gunakan .table-responsiveuntuk menatal jadual mendatar.

# Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk
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>

Titik putus tertentu

Gunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}seperti yang diperlukan untuk membuat jadual responsif sehingga titik putus tertentu. Dari titik putus itu dan ke atas, jadual akan berkelakuan seperti biasa dan tidak menatal secara mendatar.

Jadual ini mungkin kelihatan rosak sehingga gaya responsifnya digunakan pada lebar port pandangan tertentu.

# Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk
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
# Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk
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
# Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk
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
# Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk
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
# Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk
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
# Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk Tajuk
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

Pembolehubah

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

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

Menyesuaikan

  • Pembolehubah faktor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) digunakan untuk menentukan kontras dalam varian jadual.
  • Selain daripada varian meja terang & gelap, warna tema dicerahkan oleh $table-bg-scalepembolehubah.