<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
width:100%
;
height:100%
;
position:fixed;
margin:0
;
padding:0
;
}
#content{
width:1000px;
height:150px;
margin:0
auto;
border:1px solid #ddd;
margin-
top:20px;
overflow:auto;
position:relative
}
#content>table,#content .table-
fixed table{
width:700px;
border-
collapse:collapse;
table-
layout:fixed;
}
.table-fixed table th,.table-
fixed table th{
text-
align:center;
border:1px solid #ddd;
}
#content>
table th{
width:100px;
}
#content>table th,#content>
table td{
text-
align:center;
border:1px solid #ddd;
}
</style>
</head>
<body>
<div id="content">
<table class="otbl">
<thead>
<tr>
<th>固定列</th>
<th>固定列</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>固定列</td>
<td>固定列</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>固定列</td>
<td>固定列</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>固定列</td>
<td>固定列</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>固定列</td>
<td>固定列</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>固定列</td>
<td>固定列</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>固定列</td>
<td>固定列</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>固定列</td>
<td>固定列</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//固定表头
$("#content").css("position","relative"
);
$("#content").on('scroll',
function(){
var el=$(
this).find(".table-fixed"
);
//判断是否有el
if(!el[0
]){
$(this).append("<div class='table-fixed' style='position:absolute;top:0'><table style='table-layout:fixed'></table></div>"
);
var otbl=$(
this).find(".otbl thead tr"
).children();
//创建，找到表格的第一行进行克隆
var $thead=$(
this).find(".otbl thead"
).clone();
$thead.find("tr").children().each(
function(idx,ele){
$(ele).each(function(i,e){
$(e).css("width",otbl.eq(idx).css("width"
));
$(e).css("height",otbl.eq(idx).css("height"
));
})
})
$(this).find('.table-fixed table'
).append($thead);
}else{
//就设置top值
el.css("top",$(
this)[0].scrollTop+"px"
)
}
})
})
</script>
</body>
</html>
转载于:https://www.cnblogs.com/pengfei25/p/9576432.html
相关资源：201004SHJ0902V1racal通用指令集.doc
