PTT數位生活區 / Web_Design

[問題] 表格RWD使用div+css寫法

看板Web_Design作者 (Adun)時間7年前 (2018/02/28 15:10), 編輯推噓3(3推 0噓 5→)
留言8則, 5人參與, 7年前最新討論串1/1
最近在練習寫表格真的覺得很頭大.... 尤其又要轉換手機版樣式，邊框線常常這邊多一條那裡少一條的...有請各位經驗多的大大分享一些心得寫法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://www.ptt.cc/bbs/Web_Design/M.1519801821.A.AA8.html
推
02/28 15:32, 7年前 , 1F
你可以研究怎麼用 jQuery FooTable 的插件 看看能不能解決
02/28 15:32, 1F
→
02/28 15:32, 7年前 , 2F
你的問題
02/28 15:32, 2F
→
03/01 01:23, 7年前 , 3F
Google: RWD table
03/01 01:23, 3F
推
03/01 06:24, 7年前 , 4F
如果使用的表格不複雜 我整理了一個輕量外掛的程式碼
03/01 06:24, 4F
→
03/01 06:24, 7年前 , 5F
可以很方便地直接套用 https://goo.gl/DZEszi
03/01 06:24, 5F
→
03/01 15:05, 7年前 , 6F
如果你的表格真的如你所示的這麼單純，應該也可以這樣解XD
03/01 15:05, 6F
→
03/01 15:05, 7年前 , 7F
03/01 15:05, 7F
推
05/17 03:04, 7年前 , 8F
display: flex / grid
05/17 03:04, 8F
‣ 更多 s9250123 的文章
文章代碼(AID): #1QbbNTge (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 s9250123 的文章
文章代碼(AID): #1QbbNTge (Web_Design)