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单元格的对齐

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