2015
05
25

響應式表格

關鍵字:響應式表格

為了因應行動裝置大量增加而出現的響應式網站,能夠在不同的裝置上提供最佳的視覺體驗,畫面的設計也十分彈性,對於現在架設網站的趨勢來說已經是非常普遍了,但有一些資訊的呈現,會因為響應式的考量而受到一些限制,像是最常見的就是表格問題了,該怎麼讓表格在手機這麼小的螢幕上,也能完好的呈現?讓使用者有良好的閱讀體驗。最近發現了兩個很不錯的網站,都是製作響應式表格的方法,在這裡提出來跟大家分享:
使用卷軸的方式:
http://gergeo.se/RWD-Table-Patterns/
就算在螢幕小的瀏覽器上,還是能夠使用捲軸清楚的比對資料,還可以選擇目前想看的資料有哪些,想隱藏的有哪些,還滿貼心的
(不過需掛上bootstrap的css、js)

表格變換的方式:
https://css-tricks.com/examples/ResponsiveTables/responsive.php
直接變換表格的型態,讓表格適用於較小的裝置

參考網址:
http://gergeo.se/RWD-Table-Patterns/
https://css-tricks.com/examples/ResponsiveTables/responsive.php
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所