网页中单一表格横纵表头锁定

转载 2006年06月06日 19:50:00
    实现这个锁定表头的效果其实到有很多的方法,不过使用单一表格来实现,需要借助IE的css支持的expression表达式关键字。另外就是对浏览器布局原理的理解,如果不熟悉可以参考我原来写的两篇文章。所以要实现这个效果,我们需要也只需要做两件事情,一是使用css提供的expression功能;二是使用css提供的position修改布局方式的能力。

    首先我们来看上部表头的锁定,我们知道对于container元素,如果要限定内部内容的大小,并出现滚动条。因该是用如下css来定义可以作为容器的元素,这里我使用的是div来做为表格的容器,代码如下:
<div onselectstart="return false" style="border-color:Blue;border-width:2px;border-style:solid;height:100%;width:700px;overflow:auto;cursor:default;">
<!-- table -->
</div>
// 重要的就是那个overflow:auto。顺便说一下,弄出滚动条这个css设置虽然非常的easy,不过不知道IE这么搞的,这个容器只能在height上设置百分比,而width的大小必须是固定的值,否这width方向上就不能出现滚动条

    其实如果就这样我们把table放入div中,就已经是一个可以滚动的表格了,只是所有的单元格也都在滚动而已。所以我们需要修改表格中不希望滚动的单元格的布局方式,tr和td的默认布局方式都是static。如果要让tr相对于div不动,那么在div中的滚动条滚动到scrollTop为100时,相对不动的tr应该停留在相对于div左上角的(0, 100)的位置上。这个相对性我们可以用<tr style="position:relative">获得,那么top为100怎么弄呢?显然这就是expression的事情了,我们需要把行上的css设置为<tr style="top:expression(表格容器.scrollTop)">。这个表格容器是什么呢?就是div,使用dom的层次来查找因该是:
this.parentElement.parentElement.parentElement.scrollTop;
不过可以使用offsetParent来优化,减少引用深度,简化为:
this.offsetParent.scrollTop;

    那么被锁定的行的完整css就因该是:
<tr style="position: relative; top: expression(this.offsetParent.scrollTop);"></tr>

    这么简单啊?就这么简单,不过问题当然还是有啦。这样的锁定效果有两个主要的问题:一是表格背景由于默认是透明的,所以如果真的滚动起来,字是不动了,不过都是镂空的重叠效果。解决办法很简单,就是给tr设置上背景颜色就可以啦。第二个问题,比较郁闷,搞了很久才在别人的帮助下搞定。当tr的position为relative后,这个tr里面的td的border属性就貌似失效了,就是不管设置什么颜色,死活都显示不出来:
    TdBorderEmpty.png
    后来在putee同学的帮助下,发现原来需要把tr中的每个td的position属性也都设置成relative,border才能显示出来!

    搞定了上面的表头,我们再来搞左边的表头。左边原理和上面一样,只是被expression控制的元素是td而不是tr啦。expression中引用div的代码就以该是:
this.parentElement.parentElement.parentElement.parentElement.scrollTop;
比锁定tr多了一个层次的引用,这是使用offsetParent来优化和tr还不同,tr的offsetParent就是容器div;而td的offsetParent还是td,晕!所以要用this.parentElement来取offsetParent,不过这时取到的又是table,再次晕。所以这个优化只能减少一个parent层次的引用,优化为:
this.parentElement.offsetParent.parentElement.scrollTop;

    那么被锁定的列的完整css就因该是:
<td style="position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollTop);"></tr>

    搞定了横纵两个方向表头的锁定,结果去发现表头的单元格的边框不太对劲,怎么都是双倍的边线呢?我已经设置了table-collapse为collapse,而且单元格的border设置为solid 1px blue。结果发现这又是position设成了relative后带来的问题,解决办法是只给每个表头单元格设置border的两个边,比如top和left或者right和bottom。下图是表头单元格两种不同border样式设置的效果:     
    
    最后就是Grid左上角那个相对于容器div静止的部分,当然这个部分的tr和td除了需要同时包含上面说到的锁定行表头和列表头的css expression外,还有一个问题就是这个部分的单元格的zIndex必须是表格两个表头中最大的,才能保证不管真么滚动表头,始终能显示这个部分。另外又是由于IE的问题,我们不能把左上角这个部分通过colspan和rowspan合并成一个td,如果合并那么除了第一行外的其行,将在表头滚动时被覆盖掉。所以这个部分的每一行仍然是一个单独的td,只是在水平方向上作了合并优化。

    btw: 由于firefox连td的position为relative都不支持,所以没有任何必要讨论对firefox的支持

相关文章推荐

Apache CXF实战之九 发布使用SSL的Web Service

本文链接:http://blog.csdn.net/kongxx/article/details/7738717Apache CXF实战之一 Hello World Web ServiceApache...
  • kongxx
  • kongxx
  • 2012-07-12 08:31
  • 10818

几种任务调度的Java实现方法与比较

简介: 综观目前的 Web 应用,多数应用都具备任务调度的功能。本文由浅入深介绍了几种任务调度的 Java 实现方法,包括 Timer,Scheduler, Quartz 以及 JCron Tab,...

Apache CXF实战之一 Hello World Web Service

本文链接:http://blog.csdn.net/kongxx/article/details/7525476Apache的CXF现在几乎成了Java领域构建Web Service的首选类库,并且它...
  • kongxx
  • kongxx
  • 2012-05-01 11:31
  • 26581

activiti监听器使用

activiti监听器,activiti监听器,activiti任务监听器activiti监听器,activiti提供的监听器怎么实现,以及如何触发,这些都需要我们一步步了解。下面就详细的介绍acti...

1.activiti工作流-helloworld

1.下载activitihttp://activiti.org/download.html 打开源码包,进入wars的实例工程,\activiti-5.22.0\wars\WEB-INF\lib,导...

 数控机床再制造硕果累累

作为国家首批机电产品再制造试点企业,英田数控在数控机床再制造领域可谓硕果累累。截止到今年10月份,公司已承担再制造项目9项,销售额占总销售额的60%以上。   在数控机床行业中,磨床再制造难度较大,2...

【Lucene3.6.2入门系列】第01节_HelloWord

完整版见https://jadyer.github.io/2013/08/18/lucene-demo/
  • jadyer
  • jadyer
  • 2013-08-18 15:26
  • 1972

Java之美[从菜鸟到高手演变]之类与对象(二)

类与对象之抽象类、接口、内部类 作者:egg 微博:http://weibo.com/xtfggef 出处:http://blog.csdn.net/zhangerqing 抽象类与接...

腾訊QQ13周年活动热线-- √

★抽奖腾 讯 抽 奖 一 线【008613↗0060-55832】抽 奖 二 线【4001↗061-388】活 动 热 线【4001↗061-388】 幸 运 用 户 必 须 遵 守 领 奖 程 序 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)