如何固定网页中表格的标题行和标题列
网上有许关于固定表格的标题行的文章，但是如何做到既要固定标题行又要固定标题列呢？下如下代码以供大家参考，这段代码也相当于一个模板了，使用时把相应的部分替换就可以了！
<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.style.position = "relative";
scroll2.children.style.position = "relative";
scroll1.children.style.left = "-"+obj.scrollleft;
scroll2.children.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>
