Bootstrap css-表格

前言：整理的东西比较基础，有不足的地方欢迎大家批评指正！

1，Bootstrap基本的表格结构

源代码：

<table class="table">                              
      <caption>基本的表格布局</caption> 　　　　　　　　      <thead> 　　　　　　　　　　　　　　　　　　　　　　          <tr> 　　　　　　　　　　　　　　　
              <th>姓名</th>
              <th>年龄</th>
              <th>城市</th>
          </tr>
      </thead>
     <tbody> 　　　　　　　　　　　　　　　　　　　　　　　
         <tr>
             <td>张三</td>
             <td>23</td>
             <td>西安</td>
        </tr>
         <tr>
             <td>李四</td>
             <td>22</td>
            <td>郑州</td>
        </tr>
         <tr>
             <td>赵武</td>
             <td>24</td>
             <td>北京</td>
         </tr>
     </tbody>
 </table> 

运行结果：

bootstrap表格所用到的标签元素如下：

2，Bootstrap表格类

向<table>标签中分别添加 .table-striped 、.table-bordered、.table-hover、.table-condensed 可分别得到条纹表格、带有边框的表格、带有悬浮样式的表格以及精简表格(行间比较紧凑)。

（1）条纹表格(.table-striped)

源代码：

<table class="table table-striped">
    <caption>人物介绍(条纹表格)</caption>
    <!--表格标题行的容器元素（<tr>），用来标识表格列-->
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄（岁）</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>西安</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>24</td>
            <td>郑州</td>
        </tr>
        <tr>
            <td>赵武</td>
            <td>23</td>
            <td>北京</td>
        </tr>
    <tbody>
</table><br><br>

结果为：

（2）边框表格(.table-bordered)

把上面代码中<table class="table table-striped">替换成<table class="table table-bordered">即可。结果如下：

（3）悬停表格(.table-hover)

把代码<table class="table table-striped">换成<table class="table table-hover">即可。结果如下：

把鼠标悬停在张三这一行上，会出现相应的悬停样式。

（4）精简表格(.table-condensed)

把代码<table class="table table-condensed">代替<table class="table table-striped">。结果如下：

（5）响应式表格

　利用<div class="table-responsive">包围<table class="table">...</table>中的内容即可

（6）为表格添加各种类

源代码：

<table class="table">
    <caption>申请记录</caption>
    <!--表格标题行的容器元素（<tr>），用来标识表格列-->
    <thead>
        <tr>
            <th>姓名</th>
            <th>申请日期</th>
            <th>申请状态</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>张三</td>
            <td>22/8/2016</td>
            <td>正在处理</td></tr>
        <tr class="success">
            <td>李四</td>
            <td>20/8/2016</td>
            <td>已通过</td></tr>
        <tr class="warning">
            <td>赵武</td>
            <td>23/8/2016</td>
            <td>待确认</td></tr>
        <tr class="danger">
            <td>王柳</td>
            <td>21/8/2016</td>
            <td>未通过</td></tr>
    <tbody>
</table>

结果如下：

3. 总结

3.1  bootstrap支持的表格元素：

3.2  表格样式,用在<table>标签中。例如，<table class="table table-striped">

以上这些表格类，可以同时使用。

3.3  行、单元格类

　　即使用在<tr>、<td>、<th>类中，一般情况是在<tr>标签中使用。例如：<tr class="active">

3.4 响应式表格

在<table class="table">......</table>的外围添加<div class="table-responsive">标签

即：

<div class="table-responsive">
    <table class="table">
              ...
              ...
    </table>
</div> 

响应式表格的好处是可以让表格水平滚动以适应小型设备。