、遇问题：

产品说：“这里有几十个页面你全都加上固定表头。”

我（上次加一个页面花了我N++个小时，又来十几个！！！）：“好的。”

产品说：“今天能弄出来吗？”

我（OOXXXXXX，）：“我试试哈”

产品：“加油！”

经理：“+1”

老板：“+1”

二、解决思路：

1.上一篇文章介绍到使用css来固定表头，但是太复杂了，不能短时间复制到多张表使用

2.只能祭出大招引用第三方Js了哈哈。

三、伪代码

引入js、css

<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>

<script src="jquery.fixedheadertable.js"></script>

<link href="defaultTheme.css" rel="stylesheet" media="screen" />

<link href="myTheme.css" rel="stylesheet" media="screen" />

jquery.fixedheadertable.js (我加了中文注释，感兴趣可以到我github上下载)

defaultTheme.css、fixedheadertable.js这两个就不要动了

只需要需改myTheme.css，这个是自己美化页面的样式哦

<div class="grid_8 height250">
 <table class="fancyTable" id="myTable01" cellpadding="0" cellspacing="0">
 <thead>
 <tr>
 <th>公司/日期</th>
 <th>2018-07-20</th>
 <th>2018-07-21</th>
 <th>2018-07-22</th>
 <th>2018-07-23</th>
 <th>2018-07-24</th>
</tr>
 </thead>
 <tbody>
 <tr>
 <td >群鑫</td>
 <td>67.9%</td>
 <td >64.8%</td>
 <td>67.5%</td>
 <td >71.5%</td>
 <td>78.1%</td>
 <td >79.8%</td>
 <td>71.9%</td>
 <td >72.6%</td>
 <td>72.1%</td>
</tr>
 </tbody>
 </table>
</div>
 <script>
$('#myTable01').fixedHeaderTable({ footer: true, cloneHeadToFoot: true, altClass: 'odd', autoShow: false });
</script>

就这么简单

演示地址：

[演示地址](http://47.105.36.188:3030/toutiao/JS实现的Table表头固定/index.html)

[源代码下载](https://github.com/harryluo163/toutiao/tree/master/JS实现的Table表头固定)

页中实现像表格文档那样固定table的表头和第一列内容，类似于excel表格那样！下面说说实现方法

效果如下：

在数据众多的列表下，规定的区域内上下左右都可以滚动查看，然而表头和侧边表头都还在，方便用户查看数据，增强用户体验！

实现代码

html结构：

css代码：

javascript代码：