table固定表頭行及列，其中行包含合併單元格（支援IE，但滑鼠滾動輪滾動效果不太友好）

阿新 • • 發佈：2018-12-21

PS:該程式碼用於學習，大部分不是原創，在他（她）人程式碼的基礎上修改成自己想實現的效果，來源不明，因此沒有加轉載連結，如有問題，先在這裡抱歉，請聯絡我刪除。

內容實現的效果與上一篇一樣，但是這個這個用了一點點js去實現IE沒有辦法相容的一些屬性，所以這個版本可以相容IE的高版本和低版本，測試用的版本時IE8和IE11，其餘版本沒有測，哈哈哈，偷懶了，該版本有點瑕疵，滾動條下滑的時候tb2的定位效果很不友好，如果大神有改進版本，記得分享給我哈，哈哈哈，再次偷懶，希望該文章能對你有幫助。

---------------------------------------------------程式碼開始-------------------------------------------------

html { height: 100%; overflow: auto; }

body { height: 100%; overflow: auto; }

.contain { border: 1px solid rgb(238, 238, 238); width: 100%; height: 97%; overflow: scroll; position: relative; float: left; top: 0px; left: 0px; margin-right:0px; margin-bottom:0px; }

th, td, tr { border: 1px solid rgb(238, 238, 238); height: 30px; width: 100px; text-align: center; }

.div_ta { height: 148px; line-height: 150px; }

div { text-align: center; }

.div_ta1 { width: 80px; /*padding:3px;*/ }

.div_ta2 { width: 340px; /*padding:3px;*/ }

.div_ta3 { height: 20px; width: 60px; /*padding:3px;*/ }

.tb1 { background: #cdd; position: fixed; z-index: 10001; width: 100px; height: 150px; }

.tb2 { background: #cdd; position: relative; top: 0px; margin-left: 506px; z-index: 1000; }

.tb3 { background: #cdd; left: 0px; height: 100%; float: left; position: relative; z-index: 1000; width: 100px; }

.tb4 { left: 506px; width: 500px; position: absolute; }</style><script src="~/Scripts/jquery-1.7.1.js"></script><script type="text/javascript"> window.onload = function () { var tableCont = document.querySelector('.contain') var Event = {}; Event.addEvents = function(target,eventType,handle){ if(document.addEventListener){ Event.addEvents = function(target,eventType,handle){ target.addEventListener(eventType,handle,false); }; }else{ Event.addEvents = function(target,eventType,handle){ target.attachEvent('on'+eventType,function(){ handle.call(target,arguments); }); }; }; Event.addEvents(target,eventType,handle); }; Event.addEvents(tableCont, "scroll", function(e) { var scrollTop = this.scrollTop; var scrollLeft = this.scrollLeft; $(".tb2").css("top", scrollTop); $(".tb3").css("left", scrollLeft); });

}</script>

<div class="contain"> <table class="tb1" cellspacing="0"> <thead> <tr> <th rowspan="5"> <div class="div_ta div_ta1" >序號</div> </th> <th rowspan="5" > <div class="div_ta div_ta2"> 名稱</div> </th> <th rowspan="5" > <div class="div_ta div_ta1"> 單位類別</div> </th> </tr> </thead> </table> <table class="tb2 " cellspacing="0"> <thead> <tr> <th colspan="5">在編總人數</th> <th colspan="26">在崗人員</th> <th colspan="20">不在崗人員</th> <th colspan="9">編外人員</th> <th rowspan="2" colspan="3"> 離休、退休（職）</th> <th rowspan="5"> <div class="div_ta3"> 校級幹部</div> </th> <th rowspan="5"> <div class="div_ta3"> 在編變化</div> </th> <th rowspan="5"> <div class="div_ta3"> 離休變化</div> </th> <th rowspan="5"> <div class="div_ta3"> 退休變化</div> </th> <th rowspan="5"> <div class="div_ta3"> 退職變化</div> </th> </tr> <tr> <th rowspan="4"> <div class="div_ta3">小計</div> </th> <th rowspan="2" colspan="2">專技</th> <th rowspan="4"><div class="div_ta3">管理</div> </th> <th rowspan="4"><div class="div_ta3">工勤</div> </th> <th colspan="5">在崗人數</th> <th colspan="5">本單位在崗 </th> <th colspan="16">外借</th> <th colspan="5">不在崗人數 </th> <th colspan="5">內退 </th> <th colspan="5">長病假 </th> <th colspan="5">其他不在崗人員</th> <th rowspan="4"><div class="div_ta3">編外人員小計</div> </th> <th colspan="3">退休返聘 </th> <th colspan="5">勞務派遣</th> </tr> <tr> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th colspan="2">專技 </th> <th rowspan="3"><div class="div_ta3">管理</div> </th> <th rowspan="3"><div class="div_ta3">工勤</div> </th> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th colspan="2">專技 </th> <th rowspan="3"><div class="div_ta3">管理</div> </th> <th rowspan="3"><div class="div_ta3">工勤</div> </th> <th colspan="5">社群 </th> <th colspan="5">掛編 </th> <th rowspan="3"><div class="div_ta3">支教教師</div> </th> <th colspan="5">其他外借 </th> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th colspan="2">專技 </th> <th rowspan="3"><div class="div_ta3">管理</div> </th> <th rowspan="3"><div class="div_ta3">工勤</div> </th> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th colspan="2">專技 </th> <th rowspan="3"><div class="div_ta3">管理</div> </th> <th rowspan="3"><div class="div_ta3">工勤</div> </th> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th colspan="2">專技 </th> <th rowspan="3"><div class="div_ta3">管理</div> </th> <th rowspan="3"><div class="div_ta3">工勤</div> </th> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th colspan="2">專技 </th> <th rowspan="3"><div class="div_ta3">管理</div> </th> <th rowspan="3"><div class="div_ta3">工勤</div> </th> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th rowspan="3"><div class="div_ta3">教師</div> </th> <th rowspan="3"><div class="div_ta3">非教師</div> </th> <th rowspan="3"><div class="div_ta3">小計</div> </th> <th colspan="2">專技 </th> <th rowspan="3"><div class="div_ta3">管理</div> </th> <th rowspan="3"><div class="div_ta3">工勤</div> </th> <th rowspan="3"><div class="div_ta3">離休</div> </th> <th rowspan="3"><div class="div_ta3">退休</div> </th> <th rowspan="3"><div class="div_ta3">退職</div> </th> </tr> <tr> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> <th rowspan="2"><div class="div_ta3">小計</div></th> <th colspan="2"><div class="div_ta3">專技</div></th> <th rowspan="2"><div class="div_ta3">管理</div></th> <th rowspan="2"><div class="div_ta3">工勤</div></th> <th rowspan="2"><div class="div_ta3">小計</div></th> <th colspan="2"><div class="div_ta3">專技</div></th> <th rowspan="2"><div class="div_ta3">管理</div></th> <th rowspan="2"><div class="div_ta3">工勤</div></th> <th rowspan="2"><div class="div_ta3">小計</div></th> <th colspan="2"><div class="div_ta3">專技</div></th> <th rowspan="2"><div class="div_ta3">管理</div></th> <th rowspan="2"><div class="div_ta3">工勤</div></th> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> <th rowspan="2"><div class="div_ta3">教師</div></th> <th rowspan="2"><div class="div_ta3">旁系列</div></th> </tr> <tr> <th><div class="div_ta3">教師</div></th> <th><div class="div_ta3">旁系列</div></th> <th><div class="div_ta3">教師</div></th> <th><div class="div_ta3">旁系列</div></th> <th><div class="div_ta3">教師</div></th> <th><div class="div_ta3">旁系列</div></th> </tr> </thead> </table> <table class="tb3" cellspacing="0"> <tbody> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr> <tr> <td><div class="div_ta1">45</div></td> <td><div class="div_ta2">名稱一</div></td> <td><div class="div_ta1">初中</div></td> </tr></tbody> </table> <table class="tb4" cellspacing="0"> <tbody> <tr>

---------------------------------------------------程式碼結束-------------------------------------------------

table固定表頭行及列，其中行包含合併單元格（支援IE，但滑鼠滾動輪滾動效果不太友好）

table固定表頭行及列，其中行包含合併單元格（支援IE，但滑鼠滾動輪滾動效果不太友好）

ThinkPHP呼叫Excel類的基本用法設定（合併單元格,Sheet表標題，行高，列寬，字型，邊框，樣式）

GRIDVIEW多行多列合併單元格（合併列）

table合併單元格（Jquery 外掛）

POI合併單元格邊框顯示問題，笨方法解決。如有更好的方法，歡迎留言，求指教告知

固定表頭和第一列、內容可滾動的table表格

table 固定表頭、列頭

bootstrap-table固定表頭固定列

JavaSE7基礎定義二維數組固定的行、列數

vue中表頭th 合併單元格，且表格列數不定的動態渲染方法

VUE-003-前端表格資料展示時，設定單元格（el-table-column）保留空格和換行

VUE-003-前端表格數據展示時，設置單元格（el-table-column）保留空格和換行

Bootstrap-table固定表頭並解決表頭與內容不對齊

簡單實現Table固定表頭

獲取table表格每行每列的資料 (橫向遍歷)

table：表格設定table-layout：fixed屬性後，如果表格中第一行出現合併單元格，那麼後面tr中的td設定寬度無效

獲取table所選行某列的屬性值

table合併單元格 colspan（跨列）和rowspan（跨行）

設計一個演算法，刪除遞增有序連結串列中值大於mink且小於maxk的所有元素（mink和maxk是給定的兩個引數，其值可以和表中的元素相同，也可以不同）。

已知兩個連結串列A和B分別表示兩個集合，其元素遞增排列。請設計一個演算法，用於求出A與B的交集，並存放在A連結串列中。

table固定表頭行及列，其中行包含合併單元格（支援IE，但滑鼠滾動輪滾動效果不太友好）

相關推薦