## 表格 **基本實例** 給任意 \<table\> 標簽添加類 .table 可以給表格添加基本的樣式 — 少量的內補（padding）和水平方向的分隔線。 實例： ```html <table class="table"> <tr> <th>#</th> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> <tr> <td>1</td> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr> <td>2</td> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> </table> ```  ***** **條紋狀表格** 通過`.table-striped`類可以給`<tbody>`之內的每一行增加斑馬條紋樣式，也就是隔行變色。 實例： ```html <table class="table table-striped"> <tr> <th>#</th> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> <tr> <td>1</td> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr> <td>2</td> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> </table> ```  ***** **帶邊框的表格** 添加`.table-bordered`類為表格和其中的每個單元格增加邊框。 實例： ```html <table class="table table-striped table-bordered"> <tr> <th>#</th> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> <tr> <td>1</td> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr> <td>2</td> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> </table> ```  ***** **鼠標懸停** 通過添加`.table-hover`類可以讓`<tbody>`中的每一行對鼠標懸停狀態作出響應。 實例： ```html <table class="table table-bordered table-hover"> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> <tr> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> </table> ```  鼠標移入當前行會改變當前行的背景色。 ***** **緊縮表格** 通過添加`.table-condensed`類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。 實例： ```html <table class="table table-bordered table-condensed"> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> <tr> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> </table> ```  ***** **狀態類** 通過這些狀態類可以為行或單元格設置顏色。 | class | 描述 | | --- | --- | | `.active` | 鼠標懸停在行或單元格上時所設置的顏色 | | `.success` | 標識成功或積極的動作 | | `.info` | 標識普通的提示信息或動作 | | `.warning` | 標識警告或需要用戶注意 | | `.danger` | 標識危險或潛在的帶來負面影響的動作| 實例: ```html <table class="table table-bordered table-condensed"> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> <tr class="active"> <th>1</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="success"> <th>2</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="info"> <th>3</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="warning"> <th>4</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="danger"> <th>5</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> </table> ```  通過為表格中的一行或一個單元格添加顏色，給瀏覽網頁的用戶提供不同類型的信息 ***** **響應式表格** 將任何`.table`元素包裹在`.table-responsive`元素內，即可創建響應式表格，其會在小屏幕設備上（小于768px）水平滾動。當屏幕大于 768px 寬度時，水平滾動條消失。注意：列數必須大于等于6列才有效果。 實例: ```html <div class="container"> <div class="table-responsive"> <table class="table table-bordered table-condensed"> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> <tr class="active"> <th>1</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="success"> <th>2</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="info"> <th>3</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="warning"> <th>4</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> <tr class="danger"> <th>5</th> <td>表格單元</td> <td>表格單元</td> <td>表格單元</td> </tr> </table> </div> </div> ```