Source

Meja

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

Contoh

Disebabkan penggunaan jadual yang meluas merentas widget pihak ketiga seperti kalendar dan pemilih tarikh, kami telah mereka bentuk jadual kami untuk mengikut serta . Cuma tambahkan kelas asas .tablekepada mana -mana <table>, kemudian lanjutkan dengan gaya tersuai atau pelbagai kelas pengubah suai kami yang disertakan.

Menggunakan penanda jadual yang paling asas, berikut ialah cara .tablejadual berasaskan kelihatan dalam Bootstrap. Semua gaya jadual diwarisi dalam Bootstrap 4 , bermakna mana-mana jadual bersarang akan digayakan dengan cara yang sama seperti induk.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Anda juga boleh menyongsangkan warna—dengan teks terang pada latar belakang gelap—dengan .table-dark.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter 
<table class="table table-dark">
  <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>

Pilihan kepala meja

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

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter 
<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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 burung @twitter 
<table class="table table-striped">
  <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>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter 
<table class="table table-striped table-dark">
  <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>

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">
  <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>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-bordered table-dark">
  <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>

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">
  <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>

.table-borderlessjuga boleh digunakan pada meja gelap.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-borderless table-dark">
  <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>

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">
  <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>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-hover table-dark">
  <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>

Meja kecil

Tambah .table-smuntuk menjadikan jadual lebih padat dengan memotong padding sel separuh.

# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-sm">
  <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>
# Pertama Terakhir pegang
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter 
<table class="table table-sm table-dark">
  <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>

Kelas kontekstual

Gunakan kelas kontekstual untuk mewarnai baris jadual atau sel individu.

Kelas Tajuk Tajuk
Aktif sel sel
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

Varian latar belakang jadual biasa tidak tersedia dengan jadual gelap, bagaimanapun, anda boleh menggunakan utiliti teks atau latar belakang untuk mencapai gaya yang serupa.

# Tajuk Tajuk
1 sel sel
2 sel sel
3 sel sel
4 sel sel
5 sel sel
6 sel sel
7 sel sel
8 sel sel
9 sel sel 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlykelas.

Cipta jadual responsif dengan membalut sebarang .tabledengan .table-responsive{-sm|-md|-lg|-xl}, menjadikan jadual menatal secara mendatar pada setiap max-widthtitik putus masing-masing sehingga (tetapi tidak termasuk) 576px, 768px, 992px dan 1120px.

Ambil perhatian bahawa memandangkan penyemak imbas pada masa ini tidak menyokong pertanyaan konteks julat , kami menangani had min-dan max-awalan dan port pandangan dengan lebar pecahan (yang boleh berlaku dalam keadaan tertentu pada peranti dpi tinggi, contohnya) dengan menggunakan nilai dengan ketepatan yang lebih tinggi untuk perbandingan ini .

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 burung @twitter 
<table class="table">
  <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 menyediakan jadual responsif dengan menggunakan .table-responsive{-sm|-md|-lg|-xl}.

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 secara 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}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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>