頁中實現像表格文檔那樣固定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表頭固定)