讓 RWD 表格能自動排序

過去為網頁表格的處理寫了不少文章，例如「自適應 RWD 表格」、「讓網頁表格自動排序」。

後來發現，效果比較好的 RWD 表格，因為手機的表格形式跟網頁已經完全不一樣，那麼在行動版將無法做到自動排序。

有次無意間在手機看到 NBA 的統計數據表格，算是比較傳統的 RWD 表格形式，才想到這樣的 RWD 表格型態，就能夠進行排序了。

那麼本篇會提供範例程式碼，讓手機也能看到表格的排序效果。

一、能夠排序的表格型態

1. 各種方案

這部分的內容之前介紹過了，不過仍有必要再說明一次。自適應表格可以有幾種處理方式：

1. 隱藏部分內容
2. 讓表格出現水平捲軸
3. 將橫向標題欄位改為直向，重新排版

這個網頁「Responsive Table」很詳細地整理了以上幾種解決方案，同時頁面上也可直接看到各種方案的即時展示效果，請切換頁簽即可。


2. 可以排序的表格型態

只有 1、2 這兩個形式可以藉由外掛來進行排序，也就是傳統的表格形式。而效果比較好的會是 2，使用水平捲軸，才不會遺失所有資訊。

但使用水平捲軸的版面效果沒那麼好，訪客很可能不知道畫面之外還有資訊，必須在畫面邊緣做處理，讓訪客知道還有沒看到的內容等待捲動。

二、範例效果

權限	會員編號	暱稱	性別	註冊時間	Email	ID	聯絡電話	聯絡地址	購買項目	會員點數
加值會員	W00001	Wayne	男生	2014/9/12	wayne@gmail.com	111111111	0912345678	台北市信義區信義路五段1號	Blogger01	5000
一般會員	W00002	Chen	女生	2014/9/17	chen@gmail.com	222222222	0923456789	台北市信義區信義路五段2號	Blogger02	50
一般會員	W00003	Ken	男生	2014/9/17	ken@gmail.com	333333333	0934567890	台北市信義區信義路五段3號	Blogger03	500
一般會員	W00004	Sung	男生	2014/9/17	sung@gmail.com	444444444	0945678901	台北市信義區信義路五段4號	Blogger04	100
一般會員	W00005	Liu	男生	2014/9/17	liu@gmail.com	555555555	0912345678	台北市信義區信義路五段5號	Blogger05	50

上面這個範例表格在網頁版會出現捲軸，訪客可知道要往右捲

也請用手機看這個表格的效果。




行動版不會自動出現捲軸，因此表格右邊使用漸層透明的效果，暗示使用者可以往右捲看更多內容，這是很好的 RWD 設計。

三、範例程式碼

以下的表格範例程式碼，就是上面的範例表格，使用的外掛及原理跟「讓網頁表格能自動排序﹍TableSorter 安裝懶人包」一模一樣，因此注意事項請直接參考該篇的解說，此處不再詳細說明：

<div class="table_outer"><div class="table_scroll">
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>權限</th>
<th>會員編號</th>
<th>暱稱</th>
<th>性別</th>
<th>註冊時間</th>
<th>Email</th>
<th>ID</th>
<th>聯絡電話</th>
<th>聯絡地址</th>
<th>購買項目</th>
<th>會員點數</th>
</tr>
</thead>
<tbody>
<tr><td>加值會員</td><td>W00001</td><td>Wayne</td><td>男生</td><td>2014/9/12</td><td>wayne@gmail.com</td><td>111111111</td><td>0912345678</td><td>台北市信義區信義路五段1號</td><td>Blogger01</td><td>5000</td></tr>
<tr><td>一般會員</td><td>W00002</td><td>Chen</td><td>女生</td><td>2014/9/17</td><td>chen@gmail.com</td><td>222222222</td><td>0923456789</td><td>台北市信義區信義路五段2號</td><td>Blogger02</td><td>50</td></tr>
<tr><td>一般會員</td><td>W00003</td><td>Ken</td><td>男生</td><td>2014/9/17</td><td>ken@gmail.com</td><td>333333333</td><td>0934567890</td><td>台北市信義區信義路五段3號</td><td>Blogger03</td><td>500</td></tr>
<tr><td>一般會員</td><td>W00004</td><td>Sung</td><td>男生</td><td>2014/9/17</td><td>sung@gmail.com</td><td>444444444</td><td>0945678901</td><td>台北市信義區信義路五段4號</td><td>Blogger04</td><td>100</td></tr>
<tr><td>一般會員</td><td>W00005</td><td>Liu</td><td>男生</td><td>2014/9/17</td><td>liu@gmail.com</td><td>555555555</td><td>0912345678</td><td>台北市信義區信義路五段5號</td><td>Blogger05</td><td>50</td></tr>
</tbody>
</table>
</div></div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.5/css/theme.blue.min.css"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.5/js/jquery.tablesorter.min.js"></script>
<script>
$("#myTable").tablesorter({
theme: "blue",
widgets: ['zebra']
});
</script>
<style>
.table_outer {position: relative;}
.table_scroll{overflow-x: auto;}
.table_outer:after { content: ""; display: block; width: 100px; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); }
#myTable{margin-bottom: 0;}
#myTable * { white-space: nowrap; }
#myTable th:last-child { padding-right: 100px; }
</style>
比較特別的地方大致說明一下：

• 為了讓表格標題、內容不斷行，CSS 必須加入 white-space: nowrap
• 為了讓表格出現捲軸，Table 外面需要包一個 DIV，設定 overflow-x: auto
• 為了讓表格右邊有 100px 寬的區塊，顯示漸層透明效果，外面還要再包一層 DIV，利用 position: absolute 設定「漸層透明區塊」的絕對位置
• 為了不影響表格最後一欄的排序功能，最後一欄要加上 padding-right: 100px

更多「表格」使用技巧：