如何固定表格的标题行和标题列
来源：中国站长学院 时间：2007-09-20 13:03:00
网上有许关于固定表格的标题行的文章，但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考：
<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>
标签：表格,标题
0
投稿猜你喜欢
带你深入了解SQL Server 2008的独到之处
2009-01-07 14:20:00
ASP动态包含文件的改进方法
2009-01-05 12:22:00
asp如何建立和删除文件夹？
2009-11-26 20:34:00
ajax返回中文乱码问题解决
2009-04-13 16:07:00
关于多域名COOKIES作用域的问题
2008-11-18 16:12:00
ASP实现GB2312转UTF-8函数
2009-02-26 13:08:00
mysql数据库下损坏数据的恢复操作其过程总结
2009-02-13 13:36:00
SQL Server 2000的视图中必须小心使用*符号
2008-12-05 15:38:00
配置高可用性的MySQL服务器负载均衡群集
2009-01-04 12:43:00
设计模式学习笔记之 - 简单工厂模式
2009-03-11 13:38:00
MySQL查询不含周末的五天前的日期
2008-11-11 12:28:00
讲解无法打开用户默认数据库的解决方法
2008-12-05 15:55:00
避免重复写代码的小函数
2008-09-21 13:41:00
10个值得关注的优秀CSS框架
2009-05-29 18:11:00
Access 导入 MSSQL 2000/2005 数据库工具
2008-10-22 13:49:00
pre标签自动换行
2009-03-13 13:37:00
设计英文网站要注意的问题
2011-04-28 11:22:00
心理模型
2009-05-17 13:45:00
如何创建SQL Server 2000故障转移群集
2009-02-13 17:18:00
谈谈如何管理门户级网站的CSS/IMG/JS文件
2009-09-03 11:48:00