作者s9250123 (Adun)
看板Web_Design
標題[問題] 表格RWD使用div+css寫法
時間Wed Feb 28 15:10:18 2018
最近在練習寫表格真的覺得很頭大....
尤其又要轉換手機版樣式，邊框線常常這邊多一條那裡少一條的...有請各位經驗多的大大分享一些心得寫法QQ
不過目前遇到比較苦手的部份是表格head
如圖（寬螢幕版本）
https://i.imgur.com/3y6PEFa.jpg
Q1. 綠色1、2列在手機版呈現會如下圖，拆成兩個區塊的表格（表格head會獨立再顯示出現）
https://i.imgur.com/XEHfcvA.jpg
_
這部份原本嘗試用data-title+偽元素去寫，
但發現這樣儲存格的區塊就要多寫margin或padding去預留上方表頭的位置，資料一多似乎有點麻煩....orz
所以想上來問問有沒有更簡潔的寫法呈現～～
_
Q2. 合併儲存格的部份要怎麼讓他寫成合併的樣子呢？（目前是寫成個別儲存格不顯示框線=還是塞在右2的儲存格裡）
以上求解感謝各位大大！小妹先跪惹Q_Q
-----
Sent from JPTT on my iPhone
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.140.157.32
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1519801821.A.AA8.html
1F：推 a65162: 你可以研究怎麼用 jQuery FooTable 的插件 看看能不能解決 02/28 15:32
2F：→ a65162: 你的問題 02/28 15:32
3F：→ Rplus: Google: RWD table 03/01 01:23
4F：推 WayneFu: 如果使用的表格不複雜 我整理了一個輕量外掛的程式碼 03/01 06:24
6F：→ miau: 如果你的表格真的如你所示的這麼單純，應該也可以這樣解XD 03/01 15:05
8F：推 a700evolve: display: flex / grid 05/17 03:04