如何固定表格的标题行和标题列
2018-09-06 12:03
网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考：
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
</head>
<script>
function syncscroll(obj)
{
x.innerHTML = obj.scrollLeft;
scroll1.children[0].style.position = relative;
scroll2.children[0].style.position = relative;
scroll1.children[0].style.left = -+obj.scrollLeft;
}
</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>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
</table>
<!--*****************************************************左上-END*****************************************************-->
</td>
<td>
<p 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>nbsp;</td>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
</table>
<!--*****************************************************右上-END*****************************************************-->
</p>
</td>
</tr>
<tr>
<td align=left valign=top>
<p 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>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
</table>
<!--*****************************************************左下-END*****************************************************-->
</p>
</td>
<td align=left valign=top>
<p 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>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td height=20>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
<td>nbsp;</td>
</tr>
<tr bgcolor=#FFFFFF>
<td heig