表格是二维数据集的最佳表现形式，在网站后台中尤其不可缺少。
一、基本表格
image.png
基本表格比较清爽，只添加了水平分隔线，而且
thead下面为粗线，tbody中的为细线
可以添加一个淡色的标题
- 必须添加
.table类。 - 标题是处于表格边框外的。
- 必须添加
thead, 才能显示标题栏的底线。 - 标题栏中文字为粗体。
二、添加网格线
image.png
使用
.table-bordered修饰， 可以添加表格外边框与列线，使整个表格呈现为网格型。
三、添加斑马线
image.png
使用
.table-striped修饰， 可以添加浅色行交替的效果。
- 因为是使用
:children伪类来实现的，所以不支持IE8。 - 背景色为
#f9f9f9。
四、添加鼠标hover效果
image.png
- 添加
.table-hover类， 使用鼠标悬停的时候，表格行背景变换为#f5f5f5, 比斑马线稍暗一点。
四、情境状态背景
image.png
在
<tr>上添加.info, .active, .success, .warning, .danger类， 可以显示5种不同的情境颜色，
如果同时有.table-hover的时候，会使用悬浮颜色稍暗一点。
这个特性可以更加直观的体现该行数据的属性。
颜色在屏幕阅读器中依旧不可见，可以添加.sr-only隐藏文本来说明。
- 具体色值与其它情境色类似。
-
.active类似悬浮色，浅灰。 -
.info浅蓝。 -
.success浅绿。 -
.warning浅橙。 -
.danger浅红。
五、紧凑表格
image.png
- 使用
.table-condensed可以创建更紧凑的表格风格。 - 它是单元格内边距减半的方式来实现的。
六、响应式表格
image.png
默认当表格过小的时候，会出现内容换行
添加一个容器div.table-responsive, 可以在内容将要换行的时候，出现水平滚动条，保证内容的可读性。
-
.table-responsive类是添加在容器<div>上，不是在<table>上。 - 容器
<div>使用了overflow-y: hidden样式，使用内容表格被截断而避免换行。
表格呈现二维数据集，让数据更有可读性，添加的网格、悬浮、情境背景，使用显示更加友好与直观。
网友评论