IDC资讯中心
网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考：
<html>
<head>
<title>untitled document</title>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″>
</head>
<script>
function syncscroll(obj)
{
y.innerhtml = obj.scrolltop;
x.innerhtml = obj.scrollleft;
scroll1.children[0].style.position = “relative”;
scroll2.children[0].style.position = “relative”;
scroll1.children[0].style.left = “-“+obj.scrollleft;
scroll2.children[0].style.top = “-“+obj.scrolltop;
}
</script>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<!–*****************************************************左上-begin*****************************************************–>
<table width=”240″ height=”100%” border=”0″ cellpadding=”0″ cellspacing=”1″ bgcolor=”#666666″>
<colgroup>
<col width=”80″ >
<col width=”80″ >
<col width=”80″ >
</colgroup>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!–*****************************************************左上-end*****************************************************–>
</td>
<td>
<div id=scroll1 style=”width:450;overflow:hidden “>
<!–*****************************************************右上-begin*****************************************************–>
<table style=”width:900 ” height=”100%” border=”0″ cellpadding=”0″ cellspacing=”1″ bgcolor=”#666666″>
<colgroup>
<col width=”150″ >
<col width=”150″ >
<col width=”150″ >
<col width=”150″ >
<col width=”150″ >
</colgroup>
<tr bgcolor=”#ffffff”>
<td> </td>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!–*****************************************************右上-end*****************************************************–>
</div>
</td>
</tr>
<tr>
<td align=”left” valign=”top”>
<div id=scroll2 style=”height:150;overflow-y:hidden;overflow-x:scroll”>
<!–*****************************************************左下-begin*****************************************************–>
<table width=”240″ height=”100%” border=”0″ cellpadding=”0″ cellspacing=”1″ bgcolor=”#666666″>
<colgroup>
<col width=”80″ >
<col width=”80″ >
<col width=”80″ >
</colgroup>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!–*****************************************************左下-end*****************************************************–>
</div>
</td>
<td align=”left” valign=”top”>
<div style=”width:450;height:150;overflow:scroll ” onscroll=”javascript:syncscroll(this)”>
<!–*****************************************************右下-begin*****************************************************–>
<table style=”width:900 ” height=”100″ border=”0″ cellpadding=”0″ cellspacing=”1″ bgcolor=”#666666″>
<colgroup>
<col width=”150″ >
<col width=”150″ >
<col width=”150″ >
<col width=”150″ >
<col width=”150″ >
</colgroup>
<tr bgcolor=”#ffffff”>
<td width=”100″ height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor=”#ffffff”>
<td height=”20″> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!–*****************************************************右下-end*****************************************************–>
</div>
</td>
</tr>
</table>
<p id=”y”> </p>
<p id=”x”> </p>
</body>
</html>
其实这段代码也相当于一个模板了，只要把相应的部分替换就可以了！
