客戶表示：哎呀，我的這個表格在手機版字都擠在一起不好閱讀阿！
Web Dev：那…我們是不是要另外 layout 一個專屬行動裝置的表格？
凱西 ：唷齁！其實有很多別的方法可以嘗試呢！
在桌機的閱讀模式下，網頁的觀看通常是寬大於高的。
所以在 Table 的排版上，常常會以橫向的 thead 與 th 去排列所有的欄位。
舉例來說，就是像下圖這樣充滿知性的樣子（感謝Bruce的Sample）：
所以在 Table 的排版上，常常會以橫向的 thead 與 th 去排列所有的欄位。
舉例來說，就是像下圖這樣充滿知性的樣子（感謝Bruce的Sample）：
但！當你的網頁要 Responsive 時，你會怎麼做呢？
行動裝置通常拿在手上觀看時，都是直式的螢幕畫面，
你的 Table 就會變成連火星人都看不懂的宇宙模式。
這時候只想大叫：神阿！誰來救救我吧！我受夠 Table 了。
行動裝置通常拿在手上觀看時，都是直式的螢幕畫面，
你的 Table 就會變成連火星人都看不懂的宇宙模式。
這時候只想大叫：神阿！誰來救救我吧！我受夠 Table 了。
在我過去寫前台網頁的一年內，我幾乎都是做一個手機版的 Table，
將上方多欄位的 th 改成一行一行的 tr，也就是的 X軸 和 Y軸 交換過來。
然後在 960寬 以上的螢幕，顯示出原本 知性的 Table,
960寬 以下的螢幕，顯示出我偷偷做好的另一個 Table。
大概就會長得像下面這樣（再次感謝 Bruce Sample）：
將上方多欄位的 th 改成一行一行的 tr，也就是的 X軸 和 Y軸 交換過來。
然後在 960寬 以上的螢幕，顯示出原本 知性的 Table,
960寬 以下的螢幕，顯示出我偷偷做好的另一個 Table。
大概就會長得像下面這樣（再次感謝 Bruce Sample）：
你這樣聽起來可能沒有很麻煩，但你只要打開程式碼一看。
你就會知道你要把一個一個 td 重新排過多麼令人想吐。
你就會知道你要把一個一個 td 重新排過多麼令人想吐。
這讓我不禁想要好好的思考，
揪竟要怎麼讓 Table Responsive 才能省工又 Make Sense?
最後得出了幾個關鍵，就來跟大家分享一下啦！
揪竟要怎麼讓 Table Responsive 才能省工又 Make Sense?
最後得出了幾個關鍵，就來跟大家分享一下啦！
＃關鍵一：隱藏某些項目
如果你的資料並不是每個欄位都很必要，其實可以在不同尺寸的行動裝置，隱藏某些欄位。
＃關鍵二：讓你的 Table 可以水平 scroll
這有兩種作法－
簡單的是，在你的 table 外面包一個 DIV，over-flow:scroll-x;
麻煩的是把 thead 換至左方 fixed, 水平 scroll 原有的 content。
( 使用這個方法的話，每個欄位的 th 與 td 需套上 white-space: nowrap; 所以你的 Content 完全無法有換行。)
簡單的是，在你的 table 外面包一個 DIV，over-flow:scroll-x;
麻煩的是把 thead 換至左方 fixed, 水平 scroll 原有的 content。
( 使用這個方法的話，每個欄位的 th 與 td 需套上 white-space: nowrap; 所以你的 Content 完全無法有換行。)
＃關鍵三：破壞 Table 的排版
將每個 tr row 分為一個一個的區塊，每個區塊都有一樣的 thead 內容。
這樣的缺點就是網頁可能會拉的很長、且thead內容會重複很多次，但是優點是所有的資料都會完整的呈現。
( 使用此方法，你需利用到 element 的 attr 以及偽元素的使用:before)
這樣的缺點就是網頁可能會拉的很長、且thead內容會重複很多次，但是優點是所有的資料都會完整的呈現。
( 使用此方法，你需利用到 element 的 attr 以及偽元素的使用:before)
＃關鍵四：其實可以不用那麼依賴 Table
你知道，使用 CSS 跟 DIV 就可以排出一模一樣的 Table 嗎？
你可以深入學習，所有的 display type。
運用 display : table; display : table-row; display : table-cell;
就可以創造出純 DIV 的 Table UI。
運用 display : table; display : table-row; display : table-cell;
就可以創造出純 DIV 的 Table UI。
門市編號門市類型01品牌形象店02品牌形象店
並沒有所謂怎樣的作法最好，而是看你的需求，
哪一個可以避免你製作兩種版面，且又符合你的需求。
哪一個可以避免你製作兩種版面，且又符合你的需求。
