网页设计中,表格列太多了如何显示?

作者: Miduol | 来源:发表于2015-10-11 01:13 被阅读3127次

个人在工作中碰上如题问题,一个数据量非常繁杂的报表需要展示在网页中,如何处理?

首先,讲一个很重要的屁话:

仔细推敲并沟通确定需求方的目的,只保留真正需要的部分!

好,假定沟通完依然存在非常多列表格,那么以下原则可以作为参照:

- 包容显示,增加横向scrollbar

(包容显示建议加上固定某些关键行和列的功能,以免刷到后面不知所云)

- 动态显示,增加对列显示/隐藏的控制

- 响应式,检测不同屏幕以显示不同项目

- 数据类:长的数据可以用缩写的方式,或保留较少小数位,鼠标悬浮时再用tooltip来展示

不同长度的数据展示方式

- 标题类:行标题或者列标题可以用倾斜的方式来节省列空间

- 内容类:有的内容可以用缩写辅助以颜色的方式来显示,同样达到效果

- 相关多行显示:将相关内容展示在同一列中

(非常实用,原则上依然是用增加行空间的方式来节省列空间。但是由于同一列的相关性,有时候反而比原来分列在易读性上更强。如:姓名、性别和年龄展示在同一个列中,称为用户列。)

根据相关性的多行显示方式

在这种情况下,依然可以通过折叠次要信息来节省行的空间。

相关多行显示后依然可以折叠次要信息

以上部分思考部分整理自ux stackexchange 的问答

相关文章

  • 网页设计中,表格列太多了如何显示?

    个人在工作中碰上如题问题,一个数据量非常繁杂的报表需要展示在网页中,如何处理? 首先,讲一个很重要的屁话: 仔细推...

  • 表格

    行, 列, 单元格, 表头行,第一行 中间表体 表尾(结尾总结) 在网页中显示表格,如何显示出来?

  • Sublime 学习web的表格基础知识

    创建表格 创建一个两行三列的表格 加粗 居中 标题 带结构的表格 用来在网页加载中边加载变显示,不会造成加载慢的效...

  • vue学习笔记--表格列中根据不同内容显示不同按钮

    目标:在表格中,A列的数据显示不同,B列根据A列中不同的数据,再显示不同的按钮。如图: 分析一下,“状态”这一列,...

  • Element表格

    目录 1、表格列求和2、表格列标记序号3、悬浮显示其他内容4、文字过多在一行以省略号显示,悬浮显示全部内容5、表格...

  • Excel表格粘到Word中

    在实际工作中,Excel表格经常需要插入到Word文档中,如果直接粘贴,表格可能无法完全显示,而且行高和列宽全乱了...

  • 【实战项目】element-ui表格文字太多溢出设置

    需求1:行中的数据太多导致表格变形 解决办法:在列属性中加上一个: 最终结果:鼠标移入才会显示对应数据,见下↓ 需...

  • Typora小技巧 05 - 如何快速移动表格中的行和列

    如何快速移动表格中的行和列 以前想要在 Typora 中移动表格中的行和列,都只能托动实现。 最近惊喜的发现 Ty...

  • 简书 markdown 用法

    1、表格 表格显示 第一列第二列第三列第一行AB第二行12第三行ab markown 原生表格写法: 2、修改文字...

  • T1.8 Excel-Graphical table

    如何美化表格——>条件格式 A 突出显示单元格 【开始】—【条件格式】——【突出显示单元格】——设计规则和样式 B...

网友评论

  • truelie:这里面还是在做信息的分类组合和交互的最优化

本文标题:网页设计中,表格列太多了如何显示?

本文链接:https://www.haomeiwen.com/subject/rszncttx.html