PTT
Submit
Submit
選擇語言
正體中文
简体中文
PTT
Web_Design
[問題] 表格RWD使用div+css寫法
作者:
s9250123
(Adun)
2018-02-28 15:10:18
最近在練習寫表格真的覺得很頭大....
尤其又要轉換手機版樣式,邊框線常常這邊多一條那裡少一條的...有請各位經驗多的大大分享一些心得寫法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
作者: a65162
2018-02-28 15:32:00
你可以研究怎麼用 jQuery FooTable 的插件 看看能不能解決你的問題
作者:
Rplus
(R+) (9527)
2018-03-01 01:23:00
Google: RWD table
作者:
WayneFu
(風塵驕子)
2018-03-01 06:24:00
如果使用的表格不複雜 我整理了一個輕量外掛的程式碼可以很方便地直接套用
https://goo.gl/DZEszi
作者:
miau
(米奧)
2018-03-01 15:05:00
如果你的表格真的如你所示的這麼單純,應該也可以這樣解XD
https://jsfiddle.net/hyoshm6v/31/
作者: a700evolve (五花毛)
2018-05-17 03:04:00
display: flex / grid
繼續閱讀
[問題] 依照使用者不同 顯示不同功能
ofpurity
[問題] cordova build ios
paul09253336
Fw: [精進] [台北] nodejs讀書會
iamnodoubt
[問題] WP網站架設問題求解
james0213
[問題] 回上一頁時,如何讓select box載入預設值
mikevada
[情報] 分享網頁圖庫工具
pply
[問題] 純CSS控制元素隱藏與顯示
Maonome
[問題] 怎樣防止進入chrome的debugger
vi000246
[問題] 網站如果沒登入,就無法呼叫WebService。
james999
[問題] post表單資料過大或者過長
mickeyboy
Links
booklink
Contact Us: admin [ a t ] ucptt.com