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"即可