bootstrap全局CSS中表格的样式

基础表格

<table class="table">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-striped">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

其效果与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单，利用CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果。

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

鼠标悬浮高亮的表格

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

鼠标悬浮高亮的效果主要是通过“hover”事件来实现，设置了“tr:hover”时的th、td的背景色为新颜色。

紧缩表格

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。。

<style>
	table td{
	   padding: 0px !important;
	}
</style>



<table class="table table-condensed">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px,你也可以如上自行调节但是一定要加上!important提升优先级

表格状态类

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

<table class="table">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>1</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr class="success">
            <td>2</td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr class="info">
            <td>3</td>
            <td>王五</td>
            <td>21</td>
        </tr>
        <tr class="warning">
            <td>4</td>
            <td>老王</td>
            <td>41</td>
        </tr>
        <tr class="danger">
            <td>5</td>
            <td>小王</td>
            <td>11</td>
        </tr>
    </tbody>
</table>