CSS通用样式3——表格

基本实例：

在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于<table>元素的表格样式如下表所示。

上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。
 Bootstrap对表格进行了优化，通过给<table>元素应用.table类样式便可以得到一个优化的基本的表格。如下图：

 表头选项

在表头中可以使用thead-light类、thead-dark类分别使<thead>的背景颜色变成浅灰色、深灰色

给表头<thead>添加.thead-light类样式示例

条纹状表格

给<table>添加.table-striped类样式，可以给表格中<tbody>元素内的任一行添加斑马条纹样式
 

带边框的表格

给<table>元素添加.table-bordered类样式，可以将表格中的每个单元格增加边框样式

 无边框的表格

给<table>元素添加.table-boardeless类样式，得到一个没有边框的表格

鼠标指针悬停

给<table>元素添加.table-hover类样式，当鼠标放到，<tbody>元素内的任一行时都会产生悬停的效果

状态类： 

Bootstrap为表格提供了多种状态的样式类，这些状态类的主要作用是为表格中的行或单元格设置不同的背景颜色。状态类设置的是<tr>、<td>或<th>元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。
 

响应式表格

通过把任意的table包装在.table-responsive类内，可以创建响应式表格。即当表格水平溢出时出现水平滚动条。