<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table表格标题固定，内容滚动</title>
</head>
<style>
#fixedDiv { width: 100%; background-color: #999; color: #000; overflow: hidden; }
#mainDiv { width: 100%; height: 500px; background-color: #fff; overflow: auto;}
#fixedDiv table, #mainDiv table { width: 1580px; }
#mainDiv tr:nth-child(even) { background-color: #f9f9f9;}
.col_1{ width:80px;}
.col_2{ width:300px;}
.col_3{ width:300px;}
.col_4{ width:300px;}
.col_5{ width:300px;}
.col_6{ width:300px;}
</style>
<body>
<div style="width: 800px; background-color: #999;">
<div id="fixedDiv">
<table>
<thead>
<tr>
<td class="col_1">序号</td>
<td class="col_2">标题1</td>
<td class="col_3">标题2</td>
<td class="col_4">标题3</td>
<td class="col_5">标题4</td>
<td class="col_6">标题5</td>
</tr>
</thead>
</table>
</div>
<div id="mainDiv">
<table>
<tbody>
<? for ( $i=1; $i<=50; $i++ ){ //这里我是用PHP进行循环N条内容的，自己修改 ?>
<tr>
<td class="col_1"><?=$i?></td>
<td class="col_2">我只是用来测试的</td>
<td class="col_3">我只是用来测试的</td>
<td class="col_4">我只是用来测试的</td>
<td class="col_5">我只是用来测试的</td>
<td class="col_6">我只是用来测试的</td>
</tr>
<? } ?>
</tbody>
</table>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
//检测是否该容器存在垂直滚动条
if ($('#mainDiv')[0].scrollHeight > $('#mainDiv')[0].clientHeight) {
$("#fixedDiv").css("width", $('#mainDiv')[0].clientWidth+"px");
}
//内容DIV滚动多少距离，标题DIV就滚动多少
$('#mainDiv').on('scroll', function () {
$("#fixedDiv").scrollLeft($('#mainDiv').scrollLeft());
});
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table表格标题固定，内容滚动</title>
</head>
<style>
#fixedDiv { width: 100%; background-color: #999; color: #000; overflow: hidden; }
#mainDiv { width: 100%; height: 500px; background-color: #fff; overflow: auto;}
#fixedDiv table, #mainDiv table { width: 1580px; }
#mainDiv tr:nth-child(even) { background-color: #f9f9f9;}
.col_1{ width:80px;}
.col_2{ width:300px;}
.col_3{ width:300px;}
.col_4{ width:300px;}
.col_5{ width:300px;}
.col_6{ width:300px;}
</style>
<body>
<div style="width: 800px; background-color: #999;">
<div id="fixedDiv">
<table>
<thead>
<tr>
<td class="col_1">序号</td>
<td class="col_2">标题1</td>
<td class="col_3">标题2</td>
<td class="col_4">标题3</td>
<td class="col_5">标题4</td>
<td class="col_6">标题5</td>
</tr>
</thead>
</table>
</div>
<div id="mainDiv">
<table>
<tbody>
<? for ( $i=1; $i<=50; $i++ ){ //这里我是用PHP进行循环N条内容的，自己修改 ?>
<tr>
<td class="col_1"><?=$i?></td>
<td class="col_2">我只是用来测试的</td>
<td class="col_3">我只是用来测试的</td>
<td class="col_4">我只是用来测试的</td>
<td class="col_5">我只是用来测试的</td>
<td class="col_6">我只是用来测试的</td>
</tr>
<? } ?>
</tbody>
</table>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
//检测是否该容器存在垂直滚动条
if ($('#mainDiv')[0].scrollHeight > $('#mainDiv')[0].clientHeight) {
$("#fixedDiv").css("width", $('#mainDiv')[0].clientWidth+"px");
}
//内容DIV滚动多少距离，标题DIV就滚动多少
$('#mainDiv').on('scroll', function () {
$("#fixedDiv").scrollLeft($('#mainDiv').scrollLeft());
});
</script>
</body>
</html>
475003427