整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
頁中實現(xiàn)像表格文檔那樣固定table的表頭和第一列內(nèi)容，類似于excel表格那樣！下面說說實現(xiàn)方法
效果如下：
在數(shù)據(jù)眾多的列表下，規(guī)定的區(qū)域內(nèi)上下左右都可以滾動查看，然而表頭和側(cè)邊表頭都還在，方便用戶查看數(shù)據(jù)，增強用戶體驗！
實現(xiàn)代碼
html結(jié)構(gòu)：
css代碼：
javascript代碼：
、遇問題：
產(chǎn)品說：“這張表我想在手機端顯示。”
我：“顯示不了，手機屏幕太窄了，好多數(shù)據(jù)無法顯示。”
一個小時后......
產(chǎn)品說：“要不你弄個滑動吧，我左右滑動查看”
我：“好的”（竟然被你想到了！！！）
N個小時后.....
產(chǎn)品說：“我向下滑動看不到標(biāo)題了”
我：“那我在把標(biāo)題固定住。。。。”
一張列表中需要展示多行多列數(shù)據(jù)，頁面太小，又要支持手機端。
二、解決思路：
1.CSS中有overflow屬性可以對溢出元素進行隱藏
2.構(gòu)建4個table,圖中1.“公司/日期”2.時間 3.公司 4.數(shù)據(jù)內(nèi)容
3.通過監(jiān)聽右邊滾動條滑動距離控制第3個table
3.通過監(jiān)聽下邊滾動條滑動距離控制第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，當(dāng)我們設(shè)置表格寬度和高度時候要注意這個高度，不然會錯位。
演示地址：
[演示地址](http://47.105.36.188:3030/toutiao/CSS實現(xiàn)的Table表頭固定/index.html)
[源代碼下載](https://github.com/harryluo163/toutiao/tree/master/CSS實現(xiàn)的Table表頭固定)
頁中實現(xiàn)像表格文檔那樣固定table的表頭和第一列內(nèi)容，類似于excel表格那樣！下面說說實現(xiàn)方法
效果如下：
在數(shù)據(jù)眾多的列表下，規(guī)定的區(qū)域內(nèi)上下左右都可以滾動查看，然而表頭和側(cè)邊表頭都還在，方便用戶查看數(shù)據(jù)，增強用戶體驗！
實現(xiàn)代碼
html結(jié)構(gòu)：
css代碼：
javascript代碼：
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
