網(wǎng)站制作NEWS
網(wǎng)頁(yè)設(shè)計(jì)中，表格列太多了如何顯示
個(gè)人在工作中碰上如題問(wèn)題，一個(gè)數(shù)據(jù)量非常繁雜的報(bào)表需要展示在網(wǎng)頁(yè)中，如何處理？
首先，講一個(gè)很重要的屁話：
仔細(xì)推敲并溝通確定需求方的目的，只保留真正需要的部分！
好，假定溝通完依然存在非常多列表格，那么以下原則可以作為參照：
- 包容顯示，增加橫向scrollbar
（包容顯示建議加上固定某些關(guān)鍵行和列的功能，以免刷到后面不知所云）
- 動(dòng)態(tài)顯示，增加對(duì)列顯示/隱藏的控制
- 響應(yīng)式，檢測(cè)不同屏幕以顯示不同項(xiàng)目
- 數(shù)據(jù)類(lèi)：長(zhǎng)的數(shù)據(jù)可以用縮寫(xiě)的方式，或保留較少小數(shù)位，鼠標(biāo)懸浮時(shí)再用tooltip來(lái)展示
不同長(zhǎng)度的數(shù)據(jù)展示方式
不同長(zhǎng)度的數(shù)據(jù)展示方式
- 標(biāo)題類(lèi)：行標(biāo)題或者列標(biāo)題可以用傾斜的方式來(lái)節(jié)省列空間
- 內(nèi)容類(lèi)：有的內(nèi)容可以用縮寫(xiě)輔助以顏色的方式來(lái)顯示，同樣達(dá)到效果
- 相關(guān)多行顯示：將相關(guān)內(nèi)容展示在同一列中
（非常實(shí)用，原則上依然是用增加行空間的方式來(lái)節(jié)省列空間。但是由于同一列的相關(guān)性，有時(shí)候反而比原來(lái)分列在易讀性上更強(qiáng)。如：姓名、性別和年齡展示在同一個(gè)列中，稱(chēng)為用戶(hù)列。）
根據(jù)相關(guān)性的多行顯示方式
根據(jù)相關(guān)性的多行顯示方式
在這種情況下，依然可以通過(guò)折疊次要信息來(lái)節(jié)省行的空間。
相關(guān)多行顯示后依然可以折疊次要信息
相關(guān)多行顯示后依然可以折疊次要信息
多重隨機(jī)標(biāo)簽