table固定表头行及列，其中行包含合并单元格（支持IE，但鼠标滚动轮滚动效果不太友好）...

最新推荐文章于 2022-12-13 19:53:39 发布

bangshangran1492

最新推荐文章于 2022-12-13 19:53:39 发布

阅读量206

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Beata-hu/p/9951062.html

版权

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>

---------------------------------------------------代码结束-------------------------------------------------

转载于:https://www.cnblogs.com/Beata-hu/p/9951062.html

bangshangran1492

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table固定表头行及列，其中行包含合并单元格（支持IE，但鼠标滚动轮滚动效果不太友好）...

PS:该代码用于学习，大部分不是原创，在他（她）人代码的基础上修改成自己想实现的效果，来源不明，因此没有加转载链接，如有问题，先在这里抱歉，请联系我删除。内容实现的效果与上一篇一样，但是这个这个用了一点点js去实现IE没有办法兼容的一些属性，所以这个版本可以兼容IE的高版本和低版本，测试用的版本时IE8和IE11，其余版本没有测，哈哈哈，偷懒了，该版本有点瑕疵，滚动条下滑的时候tb2...
复制链接

扫一扫