您的位置：首页 > Web前端 > HTML

HTML table 锁定表格头并实现表头与下面宽度动态对齐不借助JUQERY 插件

2015-05-28 09:13 931 查看
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定表格头并实现表头与下面宽度动态对齐</title>
<script language="JavaScript">
window.onload =function(){localFristTab();}
function localFristTab(){
for(var i=0;i<7;i++){
document.getElementById("table1").rows[0].cells[i].style.width=document.getElementById("table2").rows[0].cells[i].offsetWidth+"px";
}
}
</script>

</head>
<body>
<!--要锁定的表头-->
<table id="table1" width="824" border="0" cellspacing="0" cellpadding="0" >
<tr >
<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 id="tabDiv" style="position:relative;overflow:hidden;height:200px;width:845px;overflow-y:scroll">
<table id="table2" width="824" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>
<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><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>
<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><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><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 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 动态 function
相关文章推荐
新的分享
章节导航