<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++ ){ //這裏我(wǒ)(wǒ)是用PHP進行循環N條内容的，自己修改 ?>
<tr>
<td class="col_1"><?=$i?></td>
<td class="col_2">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_3">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_4">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_5">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_6">我(wǒ)(wǒ)隻是用來測試的</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滾動多少距離(lí)，标題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++ ){ //這裏我(wǒ)(wǒ)是用PHP進行循環N條内容的，自己修改 ?>
<tr>
<td class="col_1"><?=$i?></td>
<td class="col_2">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_3">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_4">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_5">我(wǒ)(wǒ)隻是用來測試的</td>
<td class="col_6">我(wǒ)(wǒ)隻是用來測試的</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滾動多少距離(lí)，标題DIV就滾動多少
$('#mainDiv').on('scroll', function () {
$("#fixedDiv").scrollLeft($('#mainDiv').scrollLeft());
});
</script>
</body>
</html>
475003427