生活随笔
收集整理的這篇文章主要介紹了
0902
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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{
100%;
height:100%;
position:fixed;
margin:0;
padding:0;
}
#content{
1000px;
height:150px;
margin:0 auto;
border:1px solid #ddd;
margin-top:20px;
overflow:auto;
position:relative
}
#content>table,#content .table-fixed table{
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{
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>
總結
以上是生活随笔為你收集整理的0902的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
