適應性設計與表格

01. 原始的表格:不做任何 CSS 設定,是一個 100% 寬度的 <table>

02. 隱藏部分項目:於不同寬度的螢幕隱藏一些非必要的 <th>、<td>欄位

03. 水平 Scroll Table:於某解析度以下螢幕將 thead 換至左方且右方的 tbody tr 以水平方式排列並可 Scroll

04. 破壞 Table 排版:直接將 thead 拿掉而剩下的 tbody tr td 都使用 display:block 排版

05. CSS 製作 Div Table:拒絕使用 <table> 改用 CSS 搭配 DIV 呈現出 table style

 

responsive-table-01 

 

原文 http://lab.25sprout.com/responsive_table/