html表格實現固定table的表頭和第一列內容

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