Bootstrap 4 表格
Bootstrap 重制了表格 ( table ) 的样式
基础表格
.table 类可以设置基础表格的样式
<table class="table">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
条纹表格
添加 .table-striped css 类，表格就会有条纹效果
<table class="table table-striped">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
带边框表格
.table-bordered CSS 类可以为表格添加边框
<table class="table table-bordered">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
表格鼠标悬停效果 (灰色背景)
.table-hover CSS 类可以为表格的每一行添加鼠标悬停效果 ( 灰色背景 )
<table class="table table-hover">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
表格黑色背景
.table-dark CSS 类可以为表格添加黑色背景
<table class="table table-dark">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
黑色条纹表格
同时添加 .table-dark 和 .table-striped CSS 类可以创建黑色的条纹表格
<table class="table table-dark table-striped">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
鼠标悬停效果 - 黑色背景表格
同时使用 .table-dark 和 .table-hover CSS 类可以设置黑色背景表格的鼠标悬停效果
<table class="table table-dark table-hover">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
指定意义的颜色类
可以给 <tr> 或 <td> 添加 table-* 为每一行或每个单元格设置颜色
<table class="table">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr class="table-primary">
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr class="table-success">
<td>王</td>
<td>安石</td>
<td>北宋</td>
</tr>
<tr class="table-danger">
<td>欧阳</td>
<td>修</td>
<td>北宋</td>
</tr>
<tr class="table-info">
<td>司马</td>
<td>迁</td>
<td>西汉</td>
</tr>
<tr class="table-warning">
<td>杨</td>
<td>修</td>
<td>曹魏</td>
</tr>
<tr class="table-active">
<td>曹</td>
<td>操</td>
<td>曹魏</td>
</tr>
<tr class="table-secondary">
<td>曹</td>
<td>植</td>
<td>曹魏</td>
</tr>
<tr class="table-light">
<td>施</td>
<td>耐庵</td>
<td>元</td>
</tr>
<tr class="table-dark text-dark">
<td>苏</td>
<td>轼</td>
<td>北宋</td>
</tr>
</tbody>
</table>
可用于设置颜色的 CSS 类
下表列出了表格颜色类的说明
| 类名 | 描述 |
|---|---|
| .table-primary | 蓝色: 指定这是一个重要的操作 |
| .table-success | 绿色: 指定这是一个允许执行的操作 |
| .table-danger | 红色: 指定这是可以危险的操作 |
| .table-info | 浅蓝色: 表示内容已变更 |
| .table-warning | 橘色: 表示需要注意的操作 |
| .table-active | 灰色: 用于鼠标悬停效果 |
| .table-secondary | 灰色: 表示内容不怎么重要 |
| .table-light | 浅灰色，可以是表格行的背景 |
| .table-dark | 深灰色，可以是表格行的背景 |
表头颜色
.thead-dark CSS 类用于给表头添加黑色背景
.thead-light CSS 类用于给表头添加灰色背景
<table class="table">
<thead class="thead-dark">
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<thead class="thead-light">
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
紧凑的表格
.table-sm CSS 类用于通过减少内边距来设置紧凑的表格
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>姓</th>
<th>名</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>李</td>
<td>白</td>
<td>唐</td>
</tr>
<tr>
<td>韩</td>
<td>愈</td>
<td>唐</td>
</tr>
<tr>
<td>王</td>
<td>安石</td>
<td>宋</td>
</tr>
</tbody>
</table>
响应式表格
.table-responsive CSS 类用于创建响应式表格
响应式表格的规则如下
- 在屏幕宽度小于 992px 时会创建水平滚动条
- 如果可视区域宽度大于 992px 则没有滚动条
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
屏幕宽度
可以通过以下类设定在指定屏幕宽度下显示滚动条
| 类名 | 屏幕宽度 |
|---|---|
| .table-responsive-sm | < 576px |
| .table-responsive-md | < 768px |
| .table-responsive-lg | < 992px |
| .table-responsive-xl | < 1200px |
<div class="table-responsive-sm">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！