前军教程网

一、遇问题：

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

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

一个小时后......

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

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

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表头固定)