輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛

最近的案子處理行動版的表格效果時，發現以前的「Blogger 插入表格最佳流程 + 自適應寬度」，這個方式若用在商業網站，將沒有任何質感可言，甚至可以用簡陋來形容。

於是找了一下自適應 RWD 表格有沒有比較美觀，而且又簡便的處理方式。有發現幾個功能強大的外掛，但操作稍嫌複雜。

本篇要介紹的方案，比較能夠無腦套用，且現成的樣式、配色就很美觀，不用另外修改或研究 CSS 語法。

點此看範例網頁

一、RWD 表格的原理

A. 各種方案

自適應表格可以有幾種處理方式：

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

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




B. 優劣比較

1. 隱藏部分內容：可根據不同寬度顯示不同內容，但製作、維護都不方便。
2. 使用水平捲軸：最簡單的方式，但網站想要有質感的話，無法考慮這個方案。
3. 橫向改直向重新排版：不必更動原表格內容，雖然表格拉得比較長，但版面美觀，製作及維護都很方便。

因此本篇會介紹第 3 種處理方式。

二、jQuery RWD 表格外掛

1. 各種外掛

這篇「Free jQuery responsive table Plugins」介紹了許多免費的 jQuery 自適應表格外掛，整理的非常好，每個外掛都分別提供了 Demo 展示頁面及下載連結。




上圖的外掛功能非常強大，可以處理各種不同情況的需求，只要懂 js 就能發揮外掛的威力。

如果是一般制式的表格，求版面美觀、容易處理就好，不一定要安裝功能太多的外掛，光是看說明書就很頭痛。


2. 簡易外掛 Basic Table

本篇要介紹的 jQuery 超輕量外掛 Basic Table，檔案很小，其實不必找外連空間，js/css 直接塞範本就好：

• 官網頁面：Basic Responsive Table Plugin For jQuery
• Demo 頁面：JQUERY BASIC TABLE PLUGIN DEMOS

三、安裝外掛 Basic Table

1. 安裝外掛

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例，安裝到範本的流程為，後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*jQuery Basic Table, Author: Jerry Low*/
table{background:white;border-collapse:collapse;margin:1.25em 0 0;width:100%}
table tr,table th,table td{border:none;border-bottom:1px solid #e4ebeb;font-family:'Lato',sans-serif;font-size:.875rem}
table th,table td{padding:10px 12px;text-align:left}
table th{background:#56a2cf;color:#ffffff;text-transform:uppercase}
table tr td{background:#eaf3f5;color:#999999}
table tr:nth-of-type(2n+2) td{background:#ffffff}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{font-size:.8125rem;padding:0}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before{background:#56a2cf;color:white;margin-right:10px;padding:2px 10px}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{display:inline-block;padding:2px 5px}
table.bt tfoot th:first-of-type:before,table.bt tfoot th:first-of-type .bt-content,table.bt tfoot td:first-of-type:before,table.bt tfoot td:first-of-type .bt-content,table.bt tbody td:first-of-type:before,table.bt tbody td:first-of-type .bt-content{padding-top:10px}
table.bt tfoot th:last-of-type:before,table.bt tfoot th:last-of-type .bt-content,table.bt tfoot td:last-of-type:before,table.bt tfoot td:last-of-type .bt-content,table.bt tbody td:last-of-type:before,table.bt tbody td:last-of-type .bt-content{padding-bottom:10px}
table.bt thead,table.bt tbody th{display:none}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{border:none;display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;vertical-align:top;float:left\9;width:100%\9}
table.bt tfoot th::before,table.bt tfoot td::before,table.bt tbody td::before{content:attr(data-th) ":";display:inline-block;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;font-weight:bold;width:6.5em}
table.bt tfoot th.bt-hide,table.bt tfoot td.bt-hide,table.bt tbody td.bt-hide{display:none}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{vertical-align:top}
.bt-wrapper.active{max-height:310px;overflow:auto;-webkit-overflow-scrolling:touch}
</style>
<script>
//<![CDATA[
(function($){$.fn.basictable=function(options){var setup=function(table,data){var headings=[];if(data.tableWrap){table.wrap('<div class="bt-wrapper"></div>')}var format="";if(table.find("thead tr th").length){format="thead th"}else if(table.find("tbody tr th").length){format="tbody tr th"}else if(table.find("th").length){format="tr:first th"}else{format="tr:first td"}$.each(table.find(format),function(){var $heading=$(this);var colspan=parseInt($heading.attr("colspan"),10)||1;var row=$heading.closest("tr").index();if(!headings[row]){headings[row]=[]}for(var i=0;i<colspan;i++){headings[row].push($heading)}});$.each(table.find("tbody tr"),function(){setupRow($(this),headings,data)});$.each(table.find("tfoot tr"),function(){setupRow($(this),headings,data)})};var setupRow=function($row,headings,data){$row.children().each(function(){var $cell=$(this);if(($cell.html()===""||$cell.html()==="&nbsp;")&&!data.showEmptyCells){$cell.addClass("bt-hide")}else{var cellIndex=$cell.index();var headingText="";for(var j=0;j<headings.length;j++){if(j!=0){headingText+=": "}var $heading=headings[j][cellIndex];headingText+=$heading.text()}$cell.attr("data-th",headingText);if(data.contentWrap&&!$cell.children().hasClass("bt-content")){$cell.wrapInner('<span class="bt-content" />')}}})};var unwrap=function(table){$.each(table.find("td"),function(){var $cell=$(this);var content=$cell.children(".bt-content").html();$cell.html(content)})};var check=function(table,data){if(!data.forceResponsive){if(table.removeClass("bt").outerWidth()>table.parent().width()){start(table,data)}else{end(table,data)}}else{if(data.breakpoint!==null&&$(window).width()<=data.breakpoint||data.containerBreakpoint!==null&&table.parent().width()<=data.containerBreakpoint){start(table,data)}else{end(table,data)}}};var start=function(table,data){table.addClass("bt");if(data.tableWrap){table.parent(".bt-wrapper").addClass("active")}};var end=function(table,data){table.removeClass("bt");if(data.tableWrap){table.parent(".bt-wrapper").removeClass("active")}};var destroy=function(table,data){table.find("td").removeAttr("data-th");if(data.tableWrap){table.unwrap()}if(data.contentWrap){unwrap(table)}table.removeData("basictable")};var resize=function(table){if(table.data("basictable")){check(table,table.data("basictable"))}};this.each(function(){var table=$(this);if(table.length===0||table.data("basictable")){if(table.data("basictable")){if(options=="destroy"){destroy(table,table.data("basictable"))}else if(options==="start"){start(table,table.data("basictable"))}else if(options==="stop"){end(table,table.data("basictable"))}else{check(table,table.data("basictable"))}}return false}var settings=$.extend({},$.fn.basictable.defaults,options);var vars={breakpoint:settings.breakpoint,containerBreakpoint:settings.containerBreakpoint,contentWrap:settings.contentWrap,forceResponsive:settings.forceResponsive,noResize:settings.noResize,tableWrap:settings.tableWrap,showEmptyCells:settings.showEmptyCells};if(vars.breakpoint===null&&vars.containerBreakpoint===null){vars.breakpoint=568}table.data("basictable",vars);setup(table,table.data("basictable"));if(!vars.noResize){check(table,table.data("basictable"));$(window).bind("resize.basictable",function(){resize(table)})}})};$.fn.basictable.defaults={breakpoint:null,containerBreakpoint:null,contentWrap:true,forceResponsive:true,noResize:false,tableWrap:false,showEmptyCells:false}})(jQuery);
//]]>
</script>
第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。


2. 表格 HTML 範例

以下是一個簡單表格 Table 的 HTML 範例：

<table id="RWD">
<thead>
<tr>
<th>姓名</th>
<th>身份證</th>
<th>性別</th>
<th>生日</th>
<th>行動電話</th>
<th>通訊地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wayne</td>
<td>A123456789</td>
<td>男</td>
<td>2000-01-01</td>
<td>0912345678</td>
<td>台北市信義路五段5號</td>
</tr>
<tr>
<td>Mary</td>
<td>B987654321</td>
<td>女</td>
<td>2000-10-10</td>
<td>0987654321</td>
<td>台北市信義路五段7號</td>
</tr>
</tbody>
</table>
Table 標籤需要使用 ID 參數，紅色 ID 參數字串可自訂，請記下自己使用的字串，之後會用到。


3. 執行外掛

執行外掛的方式非常簡單，在範本中搜尋</body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script>
$("#RWD").basictable();
</script>
紅色字串請改為自己的參數即可。

需要看手機的 RWD 效果，請前往展示頁面：

點此看範例網頁

四、補充修改說明

基本上本篇已經幫讀者把該安裝的 code 都整理好了，可直接無腦套用。不過如果要修改的話，有些地方官網的說明滿簡陋的，畢竟只是個簡單的小外掛，可參考以下我摸索過的補充。

1. 設定斷點

程式預設的寬度斷點值為 568，代表螢幕寬度為 568px 以下時，會使用 RWD 表格效果。

如果想要自訂 RWD 斷點，可使用以下參數：

$("#RWD").basictable({breakpoint: 768});
代表寬度 768px 以下 Table 會變成 RWD 效果。


2. 動態產生表格內容

如果表格的內容並非一開始就存在，曾經使用 js 動態產生的話，那麼 RWD 表格內容會異常，因為動態產生的內容不會被程式處理到。

因此官網提供了參數 start, stop, destroy 供不同用途使用。

當 Tabel 中有動態產生的內容後，我的處理方式如下：

// 先取消 RWD 表格
$("#RWD").basictable("destroy");
// 再重新產生 RWD 表格
$("#RWD").basictable({breakpoint: xxx});

3. 不同 CSS 用途

官網 DEMO 畫面提供了幾種不同用途的效果，但並沒有說明這些狀況下的 CSS 如何使用，可參考以下說明。

下載完官方提供的檔案、解壓縮後：

• 根目錄的 basictable.css 內容一定要使用，請複製出來
• demo 資料夾裡面的 css 資料夾，裡面的 style.css，註解標示了七個區塊，就是官網 DEMO 畫面的七種效果
• 想要使用哪種效果，就複製那個區塊的 CSS 出來使用即可

更多「表格」使用技巧：