- 相關推薦
響應式web中的表格處理
在顯示復雜的表格數據的時候,相信 Web 開發人員都碰到過顯示不下的情況，下面給出幾種響應式表格的解決方法：
一：隱藏不重要數據列
處理前：
處理后：
實現方法：
@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
以用戶角度思考，每個人對數據的認知不同，或許你隱藏的數據對于他卻是很重要的。所以這種方法不推薦。
二：固定首列，剩余列橫向滾動
處理前：
處理后：
實現方法：將橫向的表頭利用 CSS 改為縱向顯示并固定位置，其余內容部分不變并出現橫向滾動條。tbody 上應用 white-space:nowrap; tbody tr 下應用 display:inline-block;
Demo
三：多列橫向變2列縱向
處理前：
處理后：
實現方法：
定位隱藏，
| 變塊元素，并綁定對應 | 列名，然后用偽元素的content:attr(data-th)實現 |
|---|
Demo
插件推薦：
Responsive tables
如果你是用的 Bootstrap 3,那么推薦用Responsive tables
Demo
tablesaw
個人覺得這款插件功能很強大，滿足各種需求
轉載請注明來源：Web前端(W3Cways.com) - Web前端學習之路 響應式web中的表格處理
【響應式web中的表格處理】相關文章：
Oracle數據庫無響應故障處理方式12-05
EXCEL表格中數據透視表怎么用05-24
web項目總結11-22
在excel單元格中畫表格的方法01-04
網頁制作中PS圖像處理的應用07-16
web前端實習報告10-18
web實訓報告12-18
web實訓報告12-16
PS在網頁制作中圖像處理的應用07-16