方法一:
<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>
注: 这样做如果表中列过长的时候需强制换行。
方法二:
<!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>