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

转载 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的支持

固定表头可以纵向滚动的html表格

设计思路: 将表格的表头与内容分别放到两个标签里,然后将其放在一个里以使表头和表格的总宽度一致,将表格内容放到一个可滚动的div()里,为每个单元格添加类来固定宽度以实现表头与内容的单元格宽度一...
  • Jjwxyz
  • Jjwxyz
  • 2016年01月27日 15:42
  • 1673

DevExpress 纵向合并GridControl单元格控制

在DevExpress中GridControl中合并单元格只需要设置 this.gridView1.OptionsView.AllowCellMerge = true; 列默认是可合并的,若设置某列不...
  • jjhua
  • jjhua
  • 2017年02月16日 21:08
  • 1751

表格中单元格之间分隔线的隐藏方法

表格中单元格之间分隔线的隐藏方法 第 一 行 第 二 行 第 三 行 这个表格去掉了单元格之间的纵向分隔线 ...
  • kunkun378263
  • kunkun378263
  • 2014年09月12日 11:17
  • 1281

网页在线编辑表格|仿Excel|特定表头后超级爽

最近公司开发的EMIS系统有个模块需要按excel格式写,原先有个estartable插件,我们经理写的,在原来的模块上面很好用,由于我水平有限,我在短期内不能清晰的修改或扩展它,最近掌握了angul...
  • U_9_5
  • U_9_5
  • 2016年02月02日 11:32
  • 2811

锁定表格栏位范例网页

锁定表格栏位范例网页 BODY { FONT: 12px 细明体; CURSOR: default } TD { FONT: 12px 细明体; CURSOR: default } ...
  • qkhhimkfrgw
  • qkhhimkfrgw
  • 2012年02月28日 09:58
  • 399

完美兼容IE_Opera_Firefox等主流浏览器的锁定表格的 表头以及表头列

锁定 表格的表头 和 列   终于 被我 写出来了,哇哈哈~~~~~~  , 心情大好....   共享下 吧。   希望 看到的该文的 时候给予评价, 俗话说 吃水不忘挖井人啊。...
  • SongYanJun2011
  • SongYanJun2011
  • 2012年03月19日 17:53
  • 7272

单一网页源码显示工具 V 2.4

  • 2012年01月28日 20:15
  • 163KB
  • 下载

Excel表格中制作斜表头的五种方法

  • 2014年09月18日 10:33
  • 28KB
  • 下载

js表格点击表头排序

  • 2014年11月25日 14:18
  • 2KB
  • 下载

IOS自定义表格:支持XIB布局和代码布局、支持锁双向表头

  • 2017年02月17日 16:47
  • 13.17MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页中单一表格横纵表头锁定
举报原因:
原因补充:

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