Bootstrap表格

表格类
（1）.table：为任意 <table> 添加基本样式 (只有横向分隔线)
（2）.table-striped：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
（3）.table-bordered：为所有表格的单元格添加边框
（4）.table-hover：在 <tbody> 内的任一行启用鼠标悬停状态
（5）.table-condensed：行内边距（padding）被切为两半，让表格更加紧凑

<div class="container">
    <h2>表格</h2>
    <p>联合使用所有表格类</p>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>First name</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>A</td>
            </tr>
            <tr>
                <td>2</td>
                <td>B</td>
            </tr>
            <tr>
                <td>3</td>
                <td>C</td>
            </tr>
        </tbody>
    </table>

</div>

---

tr,th,td类
（1）.active ：将悬停的颜色应用在行或者单元格上
（2）.success：表示成功的操作
（3）.info：表示信息变化的操作
（4）.warning：表示一个警告的操作
（5）.danger：表示一个危险的操作

<div class="container">
    <h2>表格</h2>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>tr,th,td类</th>
            </tr>
        </thead>

        <tbody>
            <tr class="avtive">
                <td>.active</td>
                <td>将悬停的颜色应用在行或单元格上</td>
            </tr>
            <tr class="success">
                <td>.success</td>
                <td>表示成功的操作</td>
            </tr>
            <tr class="info">
                <td>.info</td>
                <td>表示信息变化的操作</td>
            </tr>
            <tr class="warning">
                <td>.warning</td>
                <td>表示一个警告的操作</td>
            </tr>
            <tr class="danger">
                <td>.danger</td>
                <td>表示一个危险的操作</td>
            </tr>
        </tbody>
    </table>
</div>

---

响应式表格
把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<div class="table-responsive">
    <table class="table">
        <caption>响应式表格布局</caption>
        <thead>
          <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>产品1</td>
                <td>23/11/2013</td>
                <td>待发货</td>
            </tr>
            <tr>
                <td>产品2</td>
                <td>10/11/2013</td>
                <td>发货中</td></tr>
            <tr>
                <td>产品3</td>
                <td>20/10/2013</td>
                <td>待确认</td>
            </tr>
        </tbody>
     </table>
</div>