| 类名 |
描述 |
| .table |
基础表格，没有任何效果 |
| .table-striped |
在tbody标签中添加条纹效果 |
| .table-bordered |
带边框，默认无边框 |
| .table-hover |
添加悬停效果 |
| .table-dark |
深灰色，可以是表格行的背景 |
| .table-primary |
蓝色: 指定这是一个重要的操作 |
| .table-success |
绿色: 指定这是一个允许执行的操作 |
| .table-danger |
红色: 指定这是可以危险的操作 |
| .table-info |
浅蓝色: 表示内容已变更 |
| .table-warning |
橘色: 表示需要注意的操作 |
| .table-active |
灰色: 用于鼠标悬停效果 |
| .table-secondary |
灰色: 表示内容不怎么重要 |
| .table-light |
浅灰色，可以是表格行的背景 |
| .thead-dark |
为表头thead添加黑色背景 |
| .thead-light |
为表头thead添加灰色背景 |
| .table-sm |
较小的表格 |
| .table-responsive |
响应式表格，超过范围就会出现横向滚动条 |
| .table-responsive-sm |
< 576px |
| .table-responsive-md |
< 768px |
| .table-responsive-lg |
< 992px(默认) |
| .table-responsive-xl |
< 1200px |
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>