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

效果如下：

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

实现代码

html结构：

css代码：

javascript代码：

、遇问题：

产品说：“这张表我想在手机端显示。”

我：“显示不了，手机屏幕太窄了，好多数据无法显示。”

一个小时后......

产品说：“要不你弄个滑动吧，我左右滑动查看”

我：“好的”（竟然被你想到了！！！）

N个小时后.....

产品说：“我向下滑动看不到标题了”

我：“那我在把标题固定住。。。。”

一张列表中需要展示多行多列数据，页面太小，又要支持手机端。

二、解决思路：

1.CSS中有overflow属性可以对溢出元素进行隐藏

2.构建4个table,图中1.“公司/日期”2.时间 3.公司 4.数据内容

3.通过监听右边滚动条滑动距离控制第3个table

3.通过监听下边滚动条滑动距离控制第2个tablesasasasa

三、伪代码

<div style="">
 <div id="div1">
 <table >
 
 </table>
 </div>
 <div id="div2">
 <table style="width:12900px;">
 
 </table>
 </div>
 <div id="div3">
 <table>
 
 </table>
 </div>
 <div id="div4">
 <table id="table1" style="width:12900px;">
 
 </table>
 </div>
</div>
<script>
 $('#table1').parent("div").each(function () {
 $(this).data({sl: this.scrollLeft, st: this.scrollTop});
 }).scroll(function () {
 var sl = this.scrollLeft, st = this.scrollTop;
 $("#div2").scrollLeft(sl);
 $("#div3").scrollTop(st);
 });
</script>

四、解析

这种适用于简单表格固定表头首列，滚动条高度是17px，当我们设置表格宽度和高度时候要注意这个高度，不然会错位。

演示地址：

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

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

、遇问题：

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

我（上次加一个页面花了我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表头固定)