bootstrap中固定table的表头

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

因为主要是给手机访问，用的是bootstrap响应式布局，今天的任务是做一个数据展示页面

但是由于数据的列比较多，所以横向显示不下，为了较好的显示，将table包裹在了一个.table-responsive元素里

那么在较小的视口（viewport）时，则可以通过滑动来查看整条数据，从而能保证整体页面的协调性。

刚才说了，数据列比较多，且第一列是后面数据的所有者，那么观察者在看数据的时候肯定是要对应着数据所有者来看的，那么问题来了

若是滑动到后面，那么很容易忘记本条的所有者，那是相当不方便的！比如我们在看NBA比赛数据的时候，有很多项统计（也就是很多列）

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

这样我们根本不知道数据对应的人是谁！哎~怎么办呢？

一般的方法都是将“所有者”一列固定下来，滑动时仅滑动后面的列。

不过之前用这个功能都是在前端框架中封装好了的，比如easyUI中有frozen columns，但是在bootstrap中倒是没用过（它本身也没提供这个）

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

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

实现起来比较简单，将几个要点：

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

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

最后实现的效果如下：