学习Bootstrap3之基本表格

表格是二维数据集的最佳表现形式，在网站后台中尤其不可缺少。

一、基本表格

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 样式，使用内容表格被截断而避免换行。

---

表格呈现二维数据集，让数据更有可读性，添加的网格、悬浮、情境背景，使用显示更加友好与直观。