基本實(shí)例

為任意 <table> 標(biāo)簽添加 .table 類可以為其賦予基本的樣式 — 少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。這種方式看起來很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認(rèn)樣式可能會(huì)影響例如日歷和日期選擇之類的插件，所以我們選擇將此樣式獨(dú)立出來。

    <table class="table">
      ...
    </table>

條紋狀表格

通過 .table-striped 類可以給 <tbody> 之內(nèi)的每一行增加斑馬條紋樣式。

跨瀏覽器兼容性

條紋狀表格是依賴 :nth-child CSS 選擇器實(shí)現(xiàn)的，而這一功能不被 Internet Explorer 8 支持。

    <table class="table table-striped">
      ...
    </table>

帶邊框的表格

添加 .table-bordered 類為表格和其中的每個(gè)單元格增加邊框。

    <table class="table table-bordered">
      ...
    </table>

鼠標(biāo)懸停

通過添加 .table-hover類可以讓 <tbody>中的每一行對鼠標(biāo)懸停狀態(tài)作出響應(yīng)。

    <table class="table table-hover">
      ...
    </table>

緊縮表格

通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會(huì)減半。

    <table class="table table-condensed">
      ...
    </table>

狀態(tài)類

    <!-- On rows -->
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>

    <!-- On cells (`td` or `th`) -->
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>

向使用輔助技術(shù)的用戶傳達(dá)用意

通過為表格中的一行或一個(gè)單元格添加顏色而賦予不同的意義只是提供了一種視覺上的表現(xiàn)，并不能為使用輔助技術(shù) -- 例如屏幕閱讀器 -- 瀏覽網(wǎng)頁的用戶提供更多信息。因此，請確保通過顏色而賦予的不同意義可以通過內(nèi)容本身來表達(dá)（即在相應(yīng)行或單元格中的可見的文本內(nèi)容）；或者通過包含額外的方式 -- 例如應(yīng)用了 .sr-only 類而隱藏的文本 -- 來表達(dá)出來。

響應(yīng)式表格

將任何 .table 元素包裹在 .table-responsive 元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失。

垂直方向的內(nèi)容截?cái)?/h3>

響應(yīng)式表格使用了 overflow-y: hidden 屬性，這樣就能將超出表格底部和頂部的內(nèi)容截?cái)?。特別是，也可以截?cái)嘞吕藛魏推渌谌浇M件。

Firefox 和 fieldset 元素

Firefox 瀏覽器對 fieldset 元素設(shè)置了一些影響 width 屬性的樣式，導(dǎo)致響應(yīng)式表格出現(xiàn)問題。除非使用我們下面提供的針對 Firefox 的 hack 代碼，否則無解：

    @-moz-document url-prefix() {
      fieldset { display: table-cell; }
    }

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>