讓你的 HTML Table Responsive 吧！

資料來源

客戶表示：哎呀，我的這個表格在手機版字都擠在一起不好閱讀阿！
Web Dev：那…我們是不是要另外 layout 一個專屬行動裝置的表格？
凱西 ：唷齁！其實有很多別的方法可以嘗試呢！

這篇文章主要是討論多欄位的 HTML Table  實現 Responsive 的實作。
以下所探討的各種關鍵，在 25lab 都可以找到相對應的 Sample 可以觀看。

---

在桌機的閱讀模式下，網頁的觀看通常是寬大於高的。
所以在 Table 的排版上，常常會以橫向的 thead 與 th 去排列所有的欄位。
舉例來說，就是像下圖這樣充滿知性的樣子（感謝Bruce的Sample）：

但！當你的網頁要 Responsive 時，你會怎麼做呢？
行動裝置通常拿在手上觀看時，都是直式的螢幕畫面，
你的 Table 就會變成連火星人都看不懂的宇宙模式。
這時候只想大叫：神阿！誰來救救我吧！我受夠 Table 了。

在我過去寫前台網頁的一年內，我幾乎都是做一個手機版的 Table，
將上方多欄位的 th 改成一行一行的  tr，也就是的 X軸 和 Y軸 交換過來。
然後在 960寬 以上的螢幕，顯示出原本 知性的 Table,
960寬 以下的螢幕，顯示出我偷偷做好的另一個 Table。
大概就會長得像下面這樣（再次感謝 Bruce Sample）：

你這樣聽起來可能沒有很麻煩，但你只要打開程式碼一看。
你就會知道你要把一個一個 td 重新排過多麼令人想吐。

---

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

---

＃關鍵一：隱藏某些項目

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

---

＃關鍵二：讓你的 Table 可以水平 scroll

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

---

＃關鍵三：破壞 Table 的排版

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

---

＃關鍵四：其實可以不用那麼依賴 Table

你知道，使用 CSS 跟 DIV 就可以排出一模一樣的 Table 嗎？

你可以深入學習，所有的 display type。
運用 display : table;  display : table-row;  display : table-cell;
就可以創造出純 DIV 的 Table UI。

   

      

         

門市編號
         

門市類型
      


    

       

01
      

品牌形象店
   
   

       

02
      

品牌形象店
   

---

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