<table width=400 border=1 bgcolor=yellow>
<tr><td height=30>
<table width=100% border=1>
<tr><td width=24% align=center>表头1</td>
<td width=24% align=center>表头2</td>
<td width=24% align=center>表头3</td>
<td width=24% align=center>表头4</td>
<td align=center>↓</td>
</tr></table>
</td></tr>
<tr><td height=200 bgcolor=#ffffff>
<div style="width:100%;height:100%;overflow-x:hidden;overflow-y:scroll">
<table width=100% height=300 border=1>
<tr><td width=25% align=center>内容1</td>
<td width=25% align=center>内容2</td>
<td width=25% align=center>内容3</td>
<td width=25% align=center>内容4</td>
</tr>
<tr><td width=25% align=center>内容1</td>
<td width=25% align=center>内容2</td>
<td width=25% align=center>内容3</td>
<td width=25% align=center>内容4</td>
</tr>
<tr><td width=25% align=center>内容1</td>
<td width=25% align=center>内容2</td>
<td width=25% align=center>内容3</td>
<td width=25% align=center>内容4</td>
</tr>
</table>
</div>
</td></tr></table>
注： 这样做如果表中列过长的时候需强制换行。
eg2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头</title>
</head>
<style type="text/css">
.fixedtd{
color:#FF0000;
position:relative;
top: expression(this.parentElement.parentElement.parentElement.scrollTop)
z-index:1;
}
</style>
<body>
<div style="overflow:auto; height:100px;">
<table width="667" cellpadding="0" cellspacing="0" border="1">
<tr bgcolor="#999999">
<td class="fixedtd" width="86">表头</td>
<td class="fixedtd" width="120">表头</td>
<td class="fixedtd" width="439">表头</td>
</tr>
<tr>
<td>内容1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容4</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容5</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容6</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
