Bootstrap 4 表格

Bootstrap 重制了表格 ( table ) 的样式

基础表格

.table 类可以设置基础表格的样式

条纹表格

添加 .table-striped css 类，表格就会有条纹效果

带边框表格

.table-bordered CSS 类可以为表格添加边框

表格鼠标悬停效果 (灰色背景)

.table-hover CSS 类可以为表格的每一行添加鼠标悬停效果 ( 灰色背景 )

表格黑色背景

.table-dark CSS 类可以为表格添加黑色背景

黑色条纹表格

同时添加 .table-dark 和 .table-striped CSS 类可以创建黑色的条纹表格

鼠标悬停效果 - 黑色背景表格

同时使用 .table-dark 和 .table-hover CSS 类可以设置黑色背景表格的鼠标悬停效果

指定意义的颜色类

可以给 <tr> 或 <td> 添加 table-* 为每一行或每个单元格设置颜色

可用于设置颜色的 CSS 类

下表列出了表格颜色类的说明

表头颜色

.thead-dark CSS 类用于给表头添加黑色背景

.thead-light CSS 类用于给表头添加灰色背景

紧凑的表格

.table-sm CSS 类用于通过减少内边距来设置紧凑的表格

响应式表格

.table-responsive CSS 类用于创建响应式表格

响应式表格的规则如下

1. 在屏幕宽度小于 992px 时会创建水平滚动条
2. 如果可视区域宽度大于 992px 则没有滚动条

屏幕宽度

可以通过以下类设定在指定屏幕宽度下显示滚动条

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！