響應式web中的表格處理

　　在顯示復雜的表格數據的時(shí)候,相信 Web 開(kāi)發(fā)人員都碰到過(guò)顯示不下的情況，下面給出幾種響應式表格的解決方法：

　　一：隱藏不重要數據列

　　處理前：

　　處理后：

　　實(shí)現方法：

　　@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

　　以用戶(hù)角度思考，每個(gè)人對數據的認知不同，或許你隱藏的數據對于他卻是很重要的。所以這種方法不推薦。

　　二：固定首列，剩余列橫向滾動(dòng)

　　處理前：

　　處理后：

　　實(shí)現方法：將橫向的表頭利用 CSS 改為縱向顯示并固定位置，其余內容部分不變并出現橫向滾動(dòng)條。tbody 上應用 white-space:nowrap; tbody tr 下應用 display:inline-block;

　　Demo

　　三：多列橫向變2列縱向

　　處理前：

　　處理后：

　　實(shí)現方法：

定位隱藏，

　　Demo

　　插件推薦：

　　Responsive tables

　　如果你是用的 Bootstrap 3,那么推薦用Responsive tables

　　Demo

　　tablesaw

　　個(gè)人覺(jué)得這款插件功能很強大，滿(mǎn)足各種需求

　　轉載請注明來(lái)源：Web前端(W3Cways.com) - Web前端學(xué)習之路 響應式web中的表格處理

【響應式web中的表格處理】相關(guān)文章：

Web服務(wù)中的異常處理09-17

響應式網(wǎng)頁(yè)中的圖片設計技巧10-23

2017年易于推廣的響應式網(wǎng)站07-21

Word表格快速處理的方法07-01

PPT中插入表格的方法06-10

Web Workers加速移動(dòng)Web應用07-01

word表格中的數據如何排序02-21

嵌入式處理器的分類(lèi)06-05

嵌入式操作系統與嵌入式處理器08-15

PS通道在圖像處理中的應用10-19