Pages

Subscribe:

Ads 468x60px

Labels

顯示具有 Responsive 標籤的文章。 顯示所有文章
顯示具有 Responsive 標籤的文章。 顯示所有文章

2015年7月30日 星期四

讓你的 HTML Table Responsive 吧!

資料來源

RWD-table
客戶表示:哎呀,我的這個表格在手機版字都擠在一起不好閱讀阿!
Web Dev:那…我們是不是要另外 layout 一個專屬行動裝置的表格?
凱西 :唷齁!其實有很多別的方法可以嘗試呢!
這篇文章主要是討論多欄位的 HTML Table  實現 Responsive 的實作。
以下所探討的各種關鍵,在 25lab 都可以找到相對應的 Sample 可以觀看。

在桌機的閱讀模式下,網頁的觀看通常是寬大於高的。
所以在 Table 的排版上,常常會以橫向的 thead 與 th 去排列所有的欄位。
舉例來說,就是像下圖這樣充滿知性的樣子(感謝Bruce的Sample):
RWD-table-1
但!當你的網頁要 Responsive 時,你會怎麼做呢?
行動裝置通常拿在手上觀看時,都是直式的螢幕畫面,
你的 Table 就會變成連火星人都看不懂的宇宙模式。
這時候只想大叫:神阿!誰來救救我吧!我受夠 Table 了。
RWD-table-2
在我過去寫前台網頁的一年內,我幾乎都是做一個手機版的 Table,
將上方多欄位的 th 改成一行一行的  tr,也就是的 X軸 和 Y軸 交換過來。
然後在 960寬 以上的螢幕,顯示出原本 知性的 Table,
960寬 以下的螢幕,顯示出我偷偷做好的另一個 Table。
大概就會長得像下面這樣(再次感謝 Bruce Sample):
RWD-table-3
你這樣聽起來可能沒有很麻煩,但你只要打開程式碼一看。
你就會知道你要把一個一個 td 重新排過多麼令人想吐。

這讓我不禁想要好好的思考,
揪竟要怎麼讓 Table Responsive 才能省工又 Make Sense?
最後得出了幾個關鍵,就來跟大家分享一下啦!

#關鍵一:隱藏某些項目

如果你的資料並不是每個欄位都很必要,其實可以在不同尺寸的行動裝置,隱藏某些欄位。
RWD-table-4

#關鍵二:讓你的 Table 可以水平 scroll

這有兩種作法-
簡單的是,在你的 table 外面包一個 DIV,over-flow:scroll-x;
麻煩的是把 thead 換至左方 fixed, 水平 scroll 原有的 content。
( 使用這個方法的話,每個欄位的 th 與  td 需套上 white-space: nowrap; 所以你的  Content 完全無法有換行。)
RWD-table-5

#關鍵三:破壞 Table 的排版

將每個 tr row 分為一個一個的區塊,每個區塊都有一樣的 thead 內容。
這樣的缺點就是網頁可能會拉的很長、且thead內容會重複很多次,但是優點是所有的資料都會完整的呈現。
( 使用此方法,你需利用到 element 的 attr 以及偽元素的使用:before)
RWD-table-6

#關鍵四:其實可以不用那麼依賴 Table

你知道,使用 CSS 跟 DIV 就可以排出一模一樣的 Table 嗎?
你可以深入學習,所有的 display type
運用 display : table;  display : table-row;  display : table-cell;
就可以創造出純 DIV 的 Table UI。
   
      
         
門市編號
         
門市類型
      
   
      
01
      
品牌形象店
   
   
      
02
      
品牌形象店
   

並沒有所謂怎樣的作法最好,而是看你的需求,
哪一個可以避免你製作兩種版面,且又符合你的需求。