如何固定表格的标题行和标题列
类别: ASP教程 
网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考：
<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>
其实这段代码也相当于一个模板了，只要把相应的部分替换就可以了！
<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>
其实这段代码也相当于一个模板了，只要把相应的部分替换就可以了！
- 上一篇: 实例讲解ASP抓取网上房产的信息
- 下一篇: XMLHTTP技术资料
