頁中實(shí)現(xiàn)像表格文檔那樣固定table的表頭和第一列內(nèi)容，類似于excel表格那樣！下面說說實(shí)現(xiàn)方法

效果如下：

在數(shù)據(jù)眾多的列表下，規(guī)定的區(qū)域內(nèi)上下左右都可以滾動(dòng)查看，然而表頭和側(cè)邊表頭都還在，方便用戶查看數(shù)據(jù)，增強(qiáng)用戶體驗(yàn)！

實(shí)現(xiàn)代碼

html結(jié)構(gòu)：

css代碼：

javascript代碼：

、遇問題：

產(chǎn)品說：“這張表我想在手機(jī)端顯示。”

我：“顯示不了，手機(jī)屏幕太窄了，好多數(shù)據(jù)無法顯示。”

一個(gè)小時(shí)后......

產(chǎn)品說：“要不你弄個(gè)滑動(dòng)吧，我左右滑動(dòng)查看”

我：“好的”（竟然被你想到了！?。。?/p>

N個(gè)小時(shí)后.....

產(chǎn)品說：“我向下滑動(dòng)看不到標(biāo)題了”

我：“那我在把標(biāo)題固定住。。。。”

一張列表中需要展示多行多列數(shù)據(jù)，頁面太小，又要支持手機(jī)端。

二、解決思路：

1.CSS中有overflow屬性可以對(duì)溢出元素進(jìn)行隱藏

2.構(gòu)建4個(gè)table,圖中1.“公司/日期”2.時(shí)間 3.公司 4.數(shù)據(jù)內(nèi)容

3.通過監(jiān)聽右邊滾動(dòng)條滑動(dòng)距離控制第3個(gè)table

3.通過監(jiān)聽下邊滾動(dòng)條滑動(dòng)距離控制第2個(gè)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>

四、解析

這種適用于簡單表格固定表頭首列，滾動(dòng)條高度是17px，當(dāng)我們?cè)O(shè)置表格寬度和高度時(shí)候要注意這個(gè)高度，不然會(huì)錯(cuò)位。

演示地址：

[演示地址](http://47.105.36.188:3030/toutiao/CSS實(shí)現(xiàn)的Table表頭固定/index.html)

[源代碼下載](https://github.com/harryluo163/toutiao/tree/master/CSS實(shí)現(xiàn)的Table表頭固定)

頁中實(shí)現(xiàn)像表格文檔那樣固定table的表頭和第一列內(nèi)容，類似于excel表格那樣！下面說說實(shí)現(xiàn)方法

效果如下：

在數(shù)據(jù)眾多的列表下，規(guī)定的區(qū)域內(nèi)上下左右都可以滾動(dòng)查看，然而表頭和側(cè)邊表頭都還在，方便用戶查看數(shù)據(jù)，增強(qiáng)用戶體驗(yàn)！

實(shí)現(xiàn)代碼

html結(jié)構(gòu)：

css代碼：

javascript代碼：