Bootstrap 5 表格

基礎表格

一個基本的 Bootstrap 5 表格有一點內邊距,以及水平分隔線。

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

實例

親自試一試

條紋行

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

實例

親自試一試

帶邊框的表格

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

實例

親自試一試

有懸停效果的行

.table-hover 類在表格行上添加懸停效果(灰色背景色):

實例

親自試一試

黑色/深色表格

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

實例

親自試一試

深色條紋表格

結合 .table-dark.table-striped 來創建深色的條紋表格:

實例

親自試一試

可懸停的深色表格

.table-hover 類在表格行上添加懸停效果(灰色背景色):

實例

親自試一試

無邊框表格

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

實例

親自試一試

上下文類

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

實例

親自試一試

可用的上下文類:

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

表頭顏色

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

實例

親自試一試

小型表格

.table-sm 類通過將單元格填充減半來使表格變小:

實例

親自試一試

響應式表格

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

實例

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

親自試一試

您還可以決定表格何時應該獲得滾動條,具體取決于屏幕寬度:

屏幕寬度
.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>

親自試一試