- 相關(guān)推薦
響應(yīng)式web中的表格處理
在顯示復(fù)雜的表格數(shù)據(jù)的時(shí)候,相信 Web 開發(fā)人員都碰到過顯示不下的情況，下面給出幾種響應(yīng)式表格的解決方法：
一：隱藏不重要數(shù)據(jù)列
處理前：
處理后：
實(shí)現(xiàn)方法：
@media only screen and (max-width: 800px) { table td:nth-child(2), table th:nth-child(2) {display: none;} } @media only screen and (max-width: 640px) { table td:nth-child(4), table th:nth-child(4), table td:nth-child(7), table th:nth-child(7), table td:nth-child(8), th:nth-child(8){display: none;} }
Demo
以用戶角度思考，每個(gè)人對(duì)數(shù)據(jù)的認(rèn)知不同，或許你隱藏的數(shù)據(jù)對(duì)于他卻是很重要的。所以這種方法不推薦。
二：固定首列，剩余列橫向滾動(dòng)
處理前：
處理后：
實(shí)現(xiàn)方法：將橫向的表頭利用 CSS 改為縱向顯示并固定位置，其余內(nèi)容部分不變并出現(xiàn)橫向滾動(dòng)條。tbody 上應(yīng)用 white-space:nowrap; tbody tr 下應(yīng)用 display:inline-block;
Demo
三：多列橫向變2列縱向
處理前：
處理后：
實(shí)現(xiàn)方法：
定位隱藏，
| 變塊元素，并綁定對(duì)應(yīng) | 列名，然后用偽元素的content:attr(data-th)實(shí)現(xiàn) |
|---|
Demo
插件推薦：
Responsive tables
如果你是用的 Bootstrap 3,那么推薦用Responsive tables
Demo
tablesaw
個(gè)人覺得這款插件功能很強(qiáng)大，滿足各種需求
轉(zhuǎn)載請(qǐng)注明來源：Web前端(W3Cways.com) - Web前端學(xué)習(xí)之路 響應(yīng)式web中的表格處理
【響應(yīng)式web中的表格處理】相關(guān)文章：
Web服務(wù)中的異常處理09-17
響應(yīng)式網(wǎng)頁中的圖片設(shè)計(jì)技巧10-23
2017年易于推廣的響應(yīng)式網(wǎng)站07-21
Word表格快速處理的方法07-01
PPT中插入表格的方法06-10
Web Workers加速移動(dòng)Web應(yīng)用07-01
嵌入式處理器的分類06-05
嵌入式操作系統(tǒng)與嵌入式處理器08-15
PS通道在圖像處理中的應(yīng)用10-19