在前端开辟中常常碰到须要页面转动时，牢固某个地区显现，罕见表格的需求，由于表格有许多列，假如列名不牢固在顶部显现，转动到底部时，能够就不晓得某些列对应的是什么了
那我们就聊一下如安在转动时牢固(thead)，让它一直显如今列表的上方
css的计划
怎样让tbody转动
假如我们用css来完成，网上罕见的一种计划是给tobdy一个牢固高度，然后让它转动，如许就完成了转动列表时，thead不动。
有同学说tbody没办法转动，所以网上也有效div来拼表格的，如许就轻易转动了。实在tbody也能够转动的，比方tbody{display:block} 如许列的宽度就须要用css来掌握了，总之是能够到达的。
这个计划的瑕玷在于，页面上有许多转动条，tbody的，页面的。虽然该计划易实行，但在视觉设计师那边通常是不能忍耐的。
运用sticky属性
如今css里有一个position:sticky属性，恰好能够完成该需求，我们只须要给thead加上position:sticky即可。关于sticky的浏览器支撑能够看这里 http://caniuse.com/#search=st…
这里有一个坑的处所，给thead的position指定sticky，chrome、safari都能够支撑，惟独firefox是不可的，也就是写上后没有任何结果
那末关于不支撑sticky的，我们只能再想处理计划了
js的计划
这里的js计划照样用css来实行的，只是这个历程当中加入了js掌握
他人的计划
高低2个table
js加载后，把当前表格分红高低2个table，上table只显现thead，下table只显现tbody。
这个略显贫苦
再克隆一个thead出来
这个关于原有thead上已绑定了事宜，关于克隆后的也要做处置惩罚，也很贫苦。
我愿望就用一个thead，尽量的削减辅佐节点，把这个事变搞定
fixed+absolute模仿sticky
我们尝试给thead加上position:fixed，再指定top:0，然后这个thead就离开的文档流，牢固在页面顶部显现了，还好，一切支撑fixed的浏览器都表现一致，就连firefox也见效了。
这时候带来的别的题目就是thead离开文档流后，thead内里的列的宽度就失效了，也就是thead中的列称号和tbody内里的列宽度不一致。
这时候想到的计划就是经由过程盘算tbody中的列宽度，然后同步给thead中的列，如许就可以对上了。
然则表格的thead并非上来就是fixed结果的，而是跟着转动条的转动，当它处于页面顶部时才举行fixed结果。即thead的position会在static与fixed之间举行切换。
如许子看上去题目就处理了，然则在某些情况下，static与fixed举行切换时，前后的列宽度并不一样，比方static时，某一列是40px的宽度，然则fixed后，经由过程盘算tbody对应列的宽度，它变成38了，虽然切换前后thead中的列与tbody中的列宽度依然是一致的，然则在切换历程当中这类宽度的变化致使表格会有一些让人不舒服的变化，关于我是不能忍的。
既然thead在文档流中和不在文档流中，tbody表现并不一致，那我们痛快直接让thead离开文档流好了，该怎样离开呢，给它position:absolute，相对定位，然后不给left top值，如许它还在本来的位置，就是不占高度了，这时候我们依然盘算tbody中的每一列的宽度，给到thead中的列。然后在absolute与fixed之间举行切换时，也不会有任何宽度变化了。
然则，运用absolute或fixed后，底本thead所占的高度就没有了，由于离开了文档流。这时候全部结果照样不对的，我们要想个办法，找个节点占著本来thead的高度，如许才圆满。
我终究找了caption标签，然后把thead的高度给到caption。如许就可以够了
