Bootstrap 5 表格
基本表格
一個基本的 Bootstrap 5 表格具有輕微的內邊距和水平分隔線。
.table 類為表格新增基本樣式
斑馬條紋行
.table-striped 類為表格新增斑馬條紋
帶邊框的表格
.table-bordered 類為表格和單元格的所有邊新增邊框
懸停行
.table-hover 類在表格行上新增懸停效果（灰色背景色）
黑/深色表格
.table-dark 類為表格新增黑色背景
深色條紋表格
結合使用 .table-dark 和 .table-striped 可建立深色條紋表格
可懸停的深色表格
.table-hover 類在表格行上新增懸停效果（灰色背景色）
無邊框表格
.table-borderless 類可移除表格的邊框
Contextual Classes
情境類 可用於為整個表格 (<table>)、表格行 (<tr>) 或表格單元格 (<td>) 著色。
示例
| 預設值 | 預設 | def@somemail.com |
| 主色 | 喬 | joe@example.com |
| 成功 | Doe | john@example.com |
| 危險 | Moe | mary@example.com |
| 資訊 | Dooley | july@example.com |
| 警告 | Refs | bo@example.com |
| 啟用 | Activeson | act@example.com |
| 次色 | 次子 | sec@example.com |
| Light | 安吉 | angie@example.com |
| Dark | Bo | bo@example.com |
可以使用的上下文類是
| 類 | 描述 |
|---|---|
.table-primary |
藍色：表示重要操作 |
.table-success |
綠色：表示成功或積極的操作 |
.table-danger |
紅色：表示危險或潛在的負面操作 |
.table-info |
淺藍色：表示中立的資訊性更改或操作 |
.table-warning |
橙色：表示可能需要注意的警告 |
.table-active |
灰色：將懸停顏色應用於表格行或表格單元格 |
.table-secondary |
灰色：表示次要操作 |
.table-light |
淺灰色表格或表格行背景 |
.table-dark |
深灰色表格或表格行背景 |
表格標題顏色
您也可以使用任何情境類僅為表格標題新增背景色
小表格
.table-sm 類透過將單元格內邊距減半來使表格變小
響應式表格
.table-responsive 類在需要時（當它水平方向過大時）為表格新增捲軸
您還可以根據螢幕寬度決定何時為表格新增捲軸
| 類 | 螢幕寬度 |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
.table-responsive-xxl |
< 1400px |
