Bootstrap 5 Tables

基础表格

一个基本的 Bootstrap 5 表格有一点内边距，以及水平分隔线。

.table 类为表格添加了基本样式：

Halimbawa

Subukan Lang

条纹行

.table-striped 类将斑马条纹添加到表中：

Halimbawa

Subukan Lang

带边框的表格

.table-bordered 类为表格和单元格的所有边添加边框：

Halimbawa

Subukan Lang

有悬停效果的行

.table-hover 类在表格行上添加悬停效果（灰色背景色）：

Halimbawa

Subukan Lang

黑色/深色表格

.table-dark 类为表格添加黑色背景：

Halimbawa

Subukan Lang

深色条纹表格

结合 .table-dark 和 .table-striped 来创建深色的条纹表格：

Halimbawa

Subukan Lang

可悬停的深色表格

.table-hover 类在表格行上添加悬停效果（灰色背景色）：

Halimbawa

Subukan Lang

Talahanayan na walang gilid

.table-borderless Tanggalan ang bawat gilid ng talahanayan:

Halimbawa

Subukan Lang

ang pangkontekstong klase

Ang pangkontekstong klase ay magagamit para sa buong talahanayan (<table>) sa talahanayan (<tr>) o cell ng talahanayan (<td>) Pagkakolore.

Halimbawa

Subukan Lang

Mga magagamit na pangkontekstong klase:

Uri ng Klase Paglalarawan
.table-primary Kulay ng asul: Naglalarawan sa mahalagang aksyon.
.table-success Kulay ng berdeng: Naglalarawan sa tagumpay o positibong aksyon.
.table-danger Kulay ng pulang: Naglalarawan sa panganib o potensyal na negatibong aksyon.
.table-info Maplit na kulay ng asul: Naglalarawan sa neutral na pagbabago ng impormasyon o aksyon.
.table-warning Kulay ng dilaw: Naglalarawan sa maaaring pansinang babala.
.table-active Kulay ng puti: Ilapat ang kulay ng hover sa talahanayan o cell.
.table-secondary Kulay ng puti: Naglalarawan sa hindi mahalagang aksyon.
.table-light Maplit na kulay ng puti o kulay ng bakground ng talahanayan o hilera ng talahanayan.
.table-dark Mataas na kulay ng puti o kulay ng bakground ng talahanayan o hilera ng talahanayan.

Kulay ng Pamagat ng Talahanayan

Maaari ka ring gamitin ang anumang pangkontekstong klase upang magdagdag ng kulay ng bakground lamang sa pamagat ng talahanayan:

Halimbawa

Subukan Lang

Maliit na Talahanayan

.table-sm Ang klase ay gumagawang maliit ang talahanayan sa pamamagitan ng pagbabawas ng halaga ng fill ng cell sa kalahati:

Halimbawa

Subukan Lang

Responsive Talahanayan

.table-responsive Ang klase ay magdagdag ng scrollbar sa talahanayan kapag kailangan (kapag ito ay lubha sa direksyon ng pader):

Halimbawa

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Subukan Lang

Maaari ka ring magpasiya kung kailan dapat makuha ng talahanayan ang scrollbar, depende sa lugad ng screen:

Uri ng Klase Lugad ng Screen
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Halimbawa

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Subukan Lang