首页 > 代码库 > bootstrap中固定table的表头

bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄

由于主要是给手机訪问。用的是bootstrap响应式布局,今天的任务是做一个数据展示页面

可是因为数据的列比較多。所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里

那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性。

刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的。那么问题来了

若是滑动到后面。那么非常easy忘记本条的全部者,那是相当不方便的!比方我们在看NBA比赛数据的时候,有非常多项统计(也就是非常多列)

技术分享


第一列显示的是名字。那么随着我们往后滑动。会出现这种结果:


技术分享


这样我们根本不知道数据相应的人是谁!哎~怎么办呢?

一般的方法都是将“全部者”一列固定下来,滑动时仅滑动后面的列。

只是之前用这个功能都是在前端框架中封装好了的,比方easyUI中有frozen columns,可是在bootstrap中倒是没用过(它本身也没提供这个)

那么自己写一个吧~也没什么思路,之后最终想到一种“非主流”一点的方法:用2个table

左边的table用来显示固定信息。而右边的table用来滑动看数据

实现起来比較简单,将几个要点:

1、使用float:left来将2个table排列到一行上,可是两者和起来的width不能超过总width

2、注意2个table单元格的对齐

最后实现的效果例如以下:

技术分享


技术分享

bootstrap中固定table的表头