Tables

使用每一個表格之前請先加上 .table,這樣做是為了保留 table 原本的樣式,以供其他用途。

預設樣式

th 預設為粗體。只有 tbody 內的 thtd有設定框線樣式。

# 產品名稱 單價 數量 小計
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>產品名稱</th>
            <th>單價</th>
            <th>數量</th>
            <th>小計</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>SONY Xperia Z C6602 - Black</td>
            <td>NTD 21,900</td>
            <td>1</td>
            <td>NTD 21,900</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Apple MacBook Pro 13-inch retina</td>
            <td>NTD 53,900</td>
            <td>1</td>
            <td>NTD 53,900</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="5" class="align-right">總計 (含稅: 5%):NTD 79,590</th>
        </tr>
    </tfoot>
</table>

內距設定

寬鬆表格

.table 加上 .table-loose,可讓表格欄位的上下內距加大。

# 產品名稱 單價 數量 小計
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table table-loose">
    ~略~
</table>

緊縮表格

.table 加上 .table-tight,可讓表格欄位的上下內距縮小。

# 產品名稱 單價 數量 小計
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table table-tight">
    ~略~
</table>

框線設定

欄位框線

<table class="table"> 加上 .table-bordered,能讓 tbody 內的欄位都能夠加上框線。

# 產品名稱 單價 數量 小計
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table table-bordered">
    ~略~
</table>

表格外框

<table class="table"> 加上 .table-outline,能讓 table 加上外框線。

# 產品名稱 單價 數量 小計
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table table-outline">
    ~略~
</table>

背景設定

條紋表格

<table class="table"> 加上 .table-striped,能讓 tbody 的基數行欄位加上背景色。

# 產品名稱 單價 數量 小計
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table table-striped">
    ~略~
</table>

Hover

<table class="table"> 加上 .table-hover,能當滑鼠移到 tbody 的每一行時會顯示背景色。

# 產品名稱 單價 數量 小計
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table table-hover">
    ~略~
</table>

Highlight

當製作一個需要對照的表格時或許能夠用到。在 <table class="table"> 加上 .table-highlight

50kg 55kg 60kg 65kg 70kg
160cm 20 21 23 25 27
165cm 18 20 22 24 26
170cm 17 19 21 23 25
175cm 16 18 20 22 24
<table class="table table-highlight">
    ~略~
</table>

Definition

<table class="table"> 加上 .table-definition

A B C
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3
4 A4 B4 C4
5 A5 B5 C5
6 A6 B6 C6
7 A7 B7 C7
8 A8 B8 C8
9 A9 B9 C9
10 A10 B10 C10
<table class="table table-definition">
    ~略~
</table>

標示顏色

可以在 <tbody> 內的 <tr> 加上 .color-*,同一排的 <th> , <td> 的文字顏色就會改變。如果加在 <th><td> 上時,就只會在該欄位上顯示。

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<table class="table">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="color-primary">
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        </tr>
        <tr class="color-secondary">
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        </tr>
        <tr class="color-focus">
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        </tr>
        <tr class="color-common">
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        </tr>
        <tr class="color-success">
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        </tr>
        <tr class="color-warning">
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        </tr>
        <tr class="color-error">
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
        </tr>
    </tfoot>
</table>

Responsive

針對Responsive所處理的一些方法。在 <table class="table"> 上使用 .table-responsive

產品名稱 單價 數量 小計
SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
總計 (含稅: 5%):NTD 79,590
<table class="table table-responsive">
    <thead>
        <tr>
            <th>#</th>
            <th>產品名稱</th>
            <th>單價</th>
            <th>數量</th>
            <th>小計</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="產品名稱">SONY Xperia Z C6602 - Black</td>
            <td data-label="單價">NTD 21,900</td>
            <td data-label="數量">1</td>
            <td data-label="小計">NTD 21,900</td>
        </tr>
        <tr>
            <td data-label="產品名稱">Apple MacBook Pro 13-inch retina</td>
            <td data-label="單價">NTD 53,900</td>
            <td data-label="數量">1</td>
            <td data-label="小計">NTD 53,900</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="4" class="align-right">總計 (含稅: 5%):NTD 79,590</th>
        </tr>
    </tfoot>
</table>

如果你不想改變 table 的型態,而是保留原本的樣式,可以在 .table 外加一層 .table-responsive-scroll

< 768px ≥ 768px ≥ 992px ≥ 1200px
Class
前綴詞
.col- .col-sm- .col-md- .col-lg-
Container 寬度 100% 720px 960px 1152px
欄位間距 16px 20px 30px
<div class="table-responsive-scroll">
    <table class="table">
    ~略~
    </table>
</div>