響應(yīng)式web中的表格處理

時(shí)間：2024-08-21 19:35:32 Web Services 我要投稿

相關(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)方法：

定位隱藏，