前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄
由于主要是给手机訪问。用的是bootstrap响应式布局,今天的任务是做一个数据展示页面
可是因为数据的列比較多。所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里
那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性。
刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的。那么问题来了
若是滑动到后面。那么非常easy忘记本条的全部者,那是相当不方便的!比方我们在看NBA比赛数据的时候,有非常多项统计(也就是非常多列)
第一列显示的是名字。那么随着我们往后滑动。会出现这种结果:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjM0NTI4Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
这样我们根本不知道数据相应的人是谁!哎~怎么办呢?
一般的方法都是将“全部者”一列固定下来,滑动时仅滑动后面的列。
只是之前用这个功能都是在前端框架中封装好了的,比方easyUI中有frozen columns,可是在bootstrap中倒是没用过(它本身也没提供这个)
那么自己写一个吧~也没什么思路,之后最终想到一种“非主流”一点的方法:用2个table
左边的table用来显示固定信息。而右边的table用来滑动看数据
实现起来比較简单,将几个要点:
1、使用float:left来将2个table排列到一行上,可是两者和起来的width不能超过总width
2、注意2个table单元格的对齐
最后实现的效果例如以下: