表格

基礎(chǔ)表格

一個基本的 Bootstrap 5 表格有一點內(nèi)邊距，以及水平分隔線。

.table 類為表格添加了基本樣式：

實例

條紋行

.table-striped 類將斑馬條紋添加到表中：

實例

帶邊框的表格

.table-bordered 類為表格和單元格的所有邊添加邊框：

實例

有懸停效果的行

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

實例

黑色/深色表格

.table-dark 類為表格添加黑色背景：

實例

深色條紋表格

結(jié)合 .table-dark 和 .table-striped 來創(chuàng)建深色的條紋表格：

實例

可懸停的深色表格

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

實例

無邊框表格

.table-borderless 類從表格中刪除邊框：

實例

上下文類

上下文類可用于為整個表格 (<table>)、表格行 (<tr>) 或表格單元格 (<td>) 著色。

實例

可用的上下文類：

類	描述
.table-primary	藍色：表示重要動作。
.table-success	綠色：表示成功或積極的動作。
.table-danger	紅色：表示危險或潛在的負面行為。
.table-info	淺藍色：表示中性的信息更改或操作。
.table-warning	橙色：表示可能需要注意的警告。
.table-active	灰色：將懸停顏色應(yīng)用于表格行或表格單元格。
.table-secondary	灰色：表示不太重要的動作。
.table-light	淺灰色表格或表格行背景。
.table-dark	深灰色表格或表格行背景。

表頭顏色

您還可以使用任何上下文類只向表格標題添加背景顏色：

實例

小型表格

.table-sm 類通過將單元格填充減半來使表格變?。?/p>

實例

響應(yīng)式表格

.table-responsive 類在需要時向表格添加滾動條（當它在水平方向上太大時）：

實例

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

您還可以決定表格何時應(yīng)該獲得滾動條，具體取決于屏幕寬度：

類	屏幕寬度
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px
.table-responsive-xxl	< 1400px

實例

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