table thead 固定 tbody滚动
一种简单的方法实现
支持多行th
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
table{
width: 100%;
border-collapse:collapse;
}
table tr th,table tr td{
height: 30px;
border: 1px solid #ddd;
text-align: center;
background: #fff;
}
.one{
width: 100%;
overflow: auto;
position: relative;
height: 200px;
z-index: 999;
}
.one-one{
position: absolute;
}
</style>
<body>
<div class="one">
<table class="one-one">
<thead>
<tr>
<th>1</th>
<th>2<br /></th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
<tr>
<th>1</th>
<th>2<br /></th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
</thead>
</table>
<table class="one-two">
<thead>
<tr>
<th>1</th>
<th>2<br /></th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
<tr>
<th>1</th>
<th>2<br /></th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
</thead>
<tbody>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
<tr>
<td>111111111</td>
<td>111111111111111111111111111</td>
<td>111111111111111111111111111111111111111111111</td>
<td>111111111</td>
<td>1</td>
<td>111111111111111111111111111111111111</td>
<td>11</td>
</tr>
</tbody>
</table>
</div>
<script>
window.onload=function(){
//让由内容的table 和没有内容的table一样宽，th一样高
$(".one-one").width($(".one-two").width())
$(".one-one thead").height($(".one-two thead").height())
//实时获取table 的宽度和th的高度
$(window).resize(function(){
$(".one-one").width($(".one-two").width())
$(".one-one thead").height($(".one-two thead").height())
})
//循环让one-one 中的每个th 与one-two中的th高度相同
$(".one-two thead tr th").each(function(i){
$(".one-one thead tr th").eq(i).width($(this).width()+1);
});
//滚动调滚动，修改one-one的top值
$(".one").scroll(function(){
var top = $(this).scrollTop();
console.log(top)
$(".one-one").css('top',top);
})
}
</script>
</body>
</html>
浙公网安备 33010602011771号