<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<style type="text/css">
#scroll_table{ height:100px; overflow:auto;}
table{border-collapse:collapse; }
table thead{background-color:#FFFFFF}
th,td{border:1px solid #CCC}
#thead{ position:fixed; z-index:100;background-color:#FFF}
.w_100{ width:100px;}
.w_60{ width:60px;}
</style>
</head>
<body>
<div id="scroll_table">
<table id="data_table">
<thead>
<tr><th class="w_100">固定表頭1</th><th class="w_100">固定表頭2</th><th class="w_60">表頭3</th><th class="w_60">表頭4</th><th class="w_60">表頭5</th><th class="w_60">表頭4</th><th class="w_60">表頭5</th><th class="w_60">表頭4</th></tr>
</thead>
<tbody>
<tr><td class="w_100">固定表頭1-1</td><td class="w_100">固定表頭2</td><td class="w_60">表頭3</td><td class="w_60">表頭4</td><td class="w_60">表頭5</td><td class="w_60">表頭4</td><td class="w_60">表頭5</td><td class="w_60">表頭4</td></tr>
<tr><td>固定表頭1-2</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-3</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-4</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-5</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-6</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-7</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-8</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-9</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-10</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-11</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-12</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
<tr><td>固定表頭1-13</td><td>固定表頭2</td><td>表頭3</td><td>表頭4</td><td>表頭5</td><td>表頭4</td><td>表頭5</td><td>表頭4</td></tr>
</tbody>
</table>
</div>
</body>
<script>
$(function(){
var browser_version=$.browser.version;
$("#scroll_table").scroll(function(e) {
if($(this).scrollTop()>0)
{
if($("#thead").length==0)
{
var thead=$('<table id="thead">'+$("table thead").html()+'</table>');
$("#scroll_table").prepend(thead);
}
else if('6.0'==browser_version||'7.0'==browser_version)
{
$("#thead").css("position","relative");
$("#thead").css("top",$(this).scrollTop());
}
}
else
{
$("#thead").remove();
}
});
});
</script>
</html>
表格固定表頭，兼容IE6+，火狐，chrome，opera
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。