如何固定表格的标题行和标题列
来源：中国站长学院 发布时间：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
投稿猜你喜欢
通常我们在制作上图的时候，会分别给四个div加上不同的css属性，来实现中间间隔。但我们更希望的是不需要对html标签做标识，直接能通过cs- 从今天开始，我将全面的共享出我所能理解的所有WEB标准方面的知识放在这个“WEB标准能有多难？”的专栏里。当然由于振之的水平有限，所讲并非是
- RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Si
- 1.我在一行结束后按回车键，就跳到隔一行的段落上，如何避免隔行跳到下一段落? A.在一行结束后先按着[Shift]键，再按回车就可以不隔行跳
- 假设mysql 安装在c：盘，mysql数据库的用户名是root，密码是123456，数据库名是database_name，在d：盘根目录下
- 如何只取数据库的前3条记录？怎么控制只取得前3行数据 这要看是什么类型的数据库了，对于Access和SQ
- 作者：Roland Smart原文链接：http://www.adaptivepath.com/ideas/newsletter/archi
- 这本来是翻译Estelle Weyl的《15 JavaScript Gotchas》，里面介绍的都是在JavaScript编程实践中平时容易
- CSS3 + HTML5是未来的Web，它们都还没有正式到来，虽然不少浏览器已经开始对它们提供部分支持。本文介绍了5个CSS3技巧，可以帮你
- 一、如何理解本条内容:一个“简单”和“复杂”的例子在我和开发人员沟通一个项目需求的时候，他们频频慨叹Mockup的设计所考虑情况之细致，很多
- 网页中使用flash可以增强页面的动态交互效果，特别是用flash来制作广告，效果更好。经常使用flash的人，可能就碰到了flash会遮住
- asp采集常用的几个FUCTION如:利用流保存文件,利用fso检测文件是否存在,利用fso检测文件夹是否存在,保存文件,取得远程数据等1.
- 下面这段代码是兼容IE的图片切换代码，请问各位老鸟如何兼容FF，或者有相类似无按钮无数字兼容FF的图片切换代码？<!DOCTYPE h
- 这个符合设计标准的三 级向上弹出菜单，纯css代码控制，没有使用javascript脚本，绿色环保，呵呵。兼容性应该更好。截图：<!D
- 内容摘要：本文介绍了使用js来实现下拉伸缩导航菜单的功能，并带有渐显的效果，值得收藏。正好这几天公司不忙，学校又没有事情，所以想抽空架一个个
- MySQL4.1以前版本服务器只能使用单一字符集，从MySQL4.1版本开始，不仅服务器能够使用多种字符集，而且在服务器、数据库、数据表、数
- SQL> show all --查看所有68个系统变量值 SQL> show user --显示当前连接用户 SQL> s
- 其实这个问题落伍谈了n次了其中care4也说了两次所以如果你有问题最好先搜索一下 说不定问题早有人解决了http://www.im286.c
- 代码如下:<％ Function Bytes2bStr(vin,cSet) Dim BytesStream,StringReturn
- 今天在看框架的时候无意间看到了document.compatMode，经过一番资料查找，终于搞懂了。文档模式在开发中貌似很少用到，最常见的是
