Kule Lazy 4

Table

使用每一個表格之前請先加上 .table，這樣做是為了保留 <table> 的樣式，以便其他用途。

預設樣式

<th> 預設字寬為 500。<th> 與 <td> 只有在 <tbody> 才會有框線樣式。

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<table class="table"> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot> </table>

內距設定

寬鬆欄位

在 .table 追加 :loose 即可讓表格欄位上下內距加大。

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<table class="table :loose"></table>

緊縮欄位

在 .table 追加 :tight 即可讓表格欄位上下內距縮小。

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<table class="table :tight"></table>

框線樣式

欄位框線

在 .table 追加 :bordered 即可讓 <tbody> 內的表格欄位產生邊框。

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<table class="table :bordered"></table>

表格外框

在 .table 追加 :outline 即可讓 <table> 產生邊框。

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<table class="table :outline"></table>

背景樣式

條紋樣式

在 .table 追加 :striped 即可讓 <tbody> 奇數行的欄位產生背影色。

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<table class="table :striped"></table>

Hover

在 .table 追加 :hover 後，只要觸發 hover 即可讓 <tbody> 欄位產生背景色。

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<table class="table :hover"></table>

Highlight

在 .table 追加 :highlight 後，只要觸發 hover 即可讓欄位產生水平與垂直色塊，方便聚焦內容。

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 :hightlight"></table>

Definition

在 .table 追加 :definition ，並且讓 <tbody> 內每一行第一個欄位使用 <th>。

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 :definition"></table>

Responsive

針對 RWD 趨勢提供兩種模式，一是表格樣式不變的情況下，超出的內容以捲動內容來應變問提；二是改變表格的樣式。

Scroller

使用 Scroller 的方式很簡單，只要在 <table> 外層加上 <div class="u-wrap-scroller">

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<div class="u-wrap-scroller"> <table class="table"></table> </div>

RWD Card

在小螢幕裝置時讓每一個 <tr> 能夠成為獨立的區塊形成卡片樣式。只要在 .table 加上 :rwd-card

排名 廠商 瀏覽器 市佔率
1 Google Chrome 64.9%
2 Apple Safari 18.06%
3 Mozilla Firefox 4.43%
4 Microsoft Internet Explorer 3.09%
5 Microsoft Edge 2.28%
6 Others Others 7.24%
100%
<div class="u-wrap-scroller"> <table class="table"></table> </div>