在手机页面上显示table方案研究
资料地址:https://elvery.net/demo/responsive-tables/
第一种方案:当屏幕宽度小于一个值时,将不重要的列隐藏掉;
第二种方案:固定第一个列,其他列可以拉动展示
第三种方案:到一定宽度后,变为单列显示;
第一种图片:
隐藏后:
第二种方案
宽屏幕截图
屏幕宽度变小后截图:
第三种方案:
宽屏幕截图:
屏幕变窄后截图:
该方案依赖的技术,需要html5 data-*支持:http://html5doctor.com/html5-custom-data-attributes/
如果窄屏幕,就单例显示有两种方案一种是通过js控制,一种是通过纯css控制;
参考资料:https://www.liquidlight.co.uk/blog/tables-in-responsive-design/
总结了在手机页面展示table的可行性方案:通过多种方式展示数据(pdf下载表格,左右滑动,用饼状图展示,动态选择控制显示的列,响应式单列展示)
参考示例:https://www.jobsedit.in/state-government-jobs/
屏幕变窄后,单列展示table消息
地址:https://medium.com/allenhwkim/mobile-friendly-table-b0cb066dbc0e
类似的table显示的示例
地址:https://stackoverflow.com/questions/14846026/how-to-display-tables-on-mobile-using-bootstrap
用bootstrap显示table;
https://github.com/filamentgroup/tablesaw
这个方案比较复杂,但功能强大,与vue结合可能比较困难;
研究总结:可以一部分页面table定宽,溢出后左右滑动查看;一部分页面,溢出后使用单列,显示查看(最早的效果截图);
几种方案比较:
1,最早的直接通过js判断页面宽度,将table替换为ul,li可以通过css定义一个较大的宽度,让table滚动,而不是变为ul,li;
2,使用纯css的方式,该方案需要html5的data-*技术被支持,效果和方案一相同;
3,使用table定宽,只能左右滑动查看,该方法最简单;
4,研究使用github的tablesaw方案,该方案比较复杂,但是功能很多;
最简单的方案:https://www.jq22.com/jquery-info15099
将table替换为使用ul,li展示;