Bootstrap 5 表格
上下文類
上下文類可用于為整個表格 (<table>
)、表格行 (<tr>
) 或表格單元格 (<td>
) 著色。
實例
可用的上下文類:
類 | 描述 |
---|---|
.table-primary |
藍色:表示重要動作。 |
.table-success |
綠色:表示成功或積極的動作。 |
.table-danger |
紅色:表示危險或潛在的負面行為。 |
.table-info |
淺藍色:表示中性的信息更改或操作。 |
.table-warning |
橙色:表示可能需要注意的警告。 |
.table-active |
灰色:將懸停顏色應用于表格行或表格單元格。 |
.table-secondary |
灰色:表示不太重要的動作。 |
.table-light |
淺灰色表格或表格行背景。 |
.table-dark |
深灰色表格或表格行背景。 |
響應式表格
.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>