<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery1.72.js"></script>
<title>riselist</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
window.onload =function() {localFristTab("table1");}
function localFristTab(tableId){
var table =document.getElementById(tableId);
var obj = $("#localTr").clone();
obj.attr("id","cloneTr");
table.innerHTML="";
$("#"+tableId).prepend(obj);
$("#cloneTr").css("visibility","visible");
}
</script>
</head>
<body>
<table id="table1" width="824" border="0" cellspacing="0" cellpadding="0" >
<img style="float:right; height:30px;margin-right:20px"
src="img/xialakuang.png" width="26" height="23" id="toUpOrDown">
</table>
<div id="tabDiv" style="position:relative;overflow:hidden;height:200px;width:845px;overflow-y:scroll">
<table id="table2" style="border:none" width="824" cellspacing="0" cellpadding="0" >
<tr>
<td style="border-left:1px solid #e1dad4;"><img
style="margin-top:15px;" src="img/book_image.png" width="89" height="94"
/>
<p style="margin-top:5px;">The Hill</p>
</td>
<td>A</td>
<td>
0
</td>
<td>
25%
</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
</tr>
<tr>
<td style="border-left:1px solid #e1dad4;"><img
style="margin-top:15px;" src="img/book_image.png" width="89" height="94"
/>
<p style="margin-top:5px;">A Parrot for Pam</p>
</td>
<td>A</td>
<td>
0
</td>
<td>
25%
</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
</tr>
<tr>
<td style="border-left:1px solid #e1dad4;"><img
style="margin-top:15px;" src="img/book_image.png" width="89" height="94"
/>
<p style="margin-top:5px;">So Many Scoops!</p>
</td>
<td>A</td>
<td>
0
</td>
<td>
25%
</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
</tr>
<tr>
<td style="border-left:1px solid #e1dad4;"><img
style="margin-top:15px;" src="img/book_image.png" width="89" height="94"
/>
<p style="margin-top:5px;">School Is Cool!</p>
</td>
<td>A</td>
<td>
0
</td>
<td>
25%
</td>
<td>2014/12/05d</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
</tr>
<tr>
<td style="border-left:1px solid #e1dad4;"><img
style="margin-top:15px;" src="img/book_image.png" width="89" height="94"
/>
<p style="margin-top:5px;">Let‘s Measure
the Weather</p>
</td>
<td>A</td>
<td>
0
</td>
<td>
25%
</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
<td>2014/12/05</td>
</tr>
<!--这个TR不要删-->
<tr id ="localTr" class="titlec" style="visibility:hidden;border:none">
<td>Book Name</td>
<td>Level</td>
<td>Reading Score</td>
<td>Reading Progress(%)</td>
<td>Quiz Score</td>
<td>Quiz Progress(%)</td>
<td>Date</td>
</tr>
</table>
</div>
</body>
</html>
THML +JS利用克隆 实现锁定表头 解决小数点上下两个表格对不齐的BUG
原文地址：http://8985647.blog.51cto.com/8975647/1655942
