頁中實現像表格文檔那樣固定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表頭固定)
*請認真填寫需求信息,我們會在24小時內與您取得聯系。