## 基本實例 為任意 `<table>` 標簽添加 `.table` 類可以為其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。這種方式看起來很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們為其賦予默認樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將此樣式獨立出來。 Optional table caption. | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table"> ... </table> ~~~ ## 條紋狀表格 通過`.table-striped`類可以給`<tbody>`之內的每一行增加斑馬條紋樣式。 #### 跨瀏覽器兼容性 條紋狀表格是依賴`:nth-child`CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table table-striped"> ... </table> ~~~ ## 帶邊框的表格 添加`.table-bordered`類為表格和其中的每個單元格增加邊框。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table table-bordered"> ... </table> ~~~ ## ## 鼠標懸停 通過添加`.table-hover`類可以讓`<tbody>`中的每一行對鼠標懸停狀態作出響應。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table table-hover"> ... </table> ~~~ ## 緊縮表格 通過添加`.table-condensed`類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry the Bird | @twitter | ~~~html <table class="table table-condensed"> ... </table> ~~~