Bootstrap 表格

HTML表格

先来回忆下HTML中的表格元素

<table>
    <caption>标题</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>23</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>24</td>
        </tr>
    </tbody>
</table>

Bootstrap表格样式

• .table 基本样式，只有行分割线
• .table-striped 隔行换色
• .table-bordered 单元格边框
• .table-hover 行内悬停变色
• .table-condensed 紧凑型表格（变小一点）

上述几个样式可以混用，比如

<table class="table table-bordered table-striped table-hover">

行/单元格样式

• .active 悬停颜色样式
• .success 绿色样式
• .info 蓝色
• .warning 黄色
• .danger 红色

例如：

    <table>
        <caption>标题</caption>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>小明</td>
                <td>23</td>
            </tr>
            <tr class="success">
                <td>小黑</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>    

响应式表格

当设备宽度小于768px时，表格自动变为可以水平滚动的样式，即响应式表格。

语法非常简单，添加class="table-responsive"即可