Tabel固定表头的2种方法

方法1.

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<style>
tr.head { position:relative; top: expression(document.all["zd"].scrollTop-1); background-color:white;}
</style>
</head>
<body>
<div style="overflow:auto;height:200px">
<table cellspacing="0" border="1" id="zd" name="zd">
<tr class="head">
<th>表头1</th><th>表头2</th>
</tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
</table>
</div>
</body>
<html>
方法2.

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
</head>
<body>
<div style="overflow:auto;height:200px">
<table cellspacing="0" border="1">
<tr style="position:relative;top:-1px;background-color:white;">
<th>表头1</th><th>表头2</th>
</tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
<tr><td>zdzhuo</td><td>zdzhuo</td></tr>
</table>
</div>
</body>
</html>



  • 发布时间:2012-07-16
  • 阅读次数:7424