2007-11-16

创建头部固定可滚动的表格

关键字: 滚动 scroll，头部固定 fixed header,表格 table
         一直以来，我都找不到一个比较好的方法用来创建头部固定可滚动的表格，网上有的只是使用javascript或者使用两三层的table标签，来实现这个功能，这样做都不好，浪费资源。直到看到了这篇文章：http://www.imaputz.com/uportal/index.php?p=18
里面有两个例子： The Big Four Version and The Bullet Resistant Version 它们很好的解决了这个功能，而且最大的好处是它们是纯CSS的。
        不过美中不足的是它们不支持IE7，在我读懂了他们的代码后发现，因为IE也支持CSS选择器。所以原版里面用来区分IE和其他浏览器的方法，在IE7上面不起作用。需要为IE7单独做hack，文件里面所有*...!important都是为了匹配IE7。另外IE7下面，tr和td会继承tbody的height属性，所以需要为tr和td重置高度属性。所以我就修正它们的问题。我想之所以它们不支持IE7可能是作者写这个文档的时候IE7还没有面世的缘故吧。
        附件里面有原件，和我修改过的，大家可以下载过来看看。
评论
cai555 2008-04-01
你是怎么删除的？贴出来看看
jimmee 2008-03-31
问个问题，你提的这个方案的确可以创建可以滚动的表格，问题是我要用javascript
动态删除这个表格中的行，当我删除后，发现thead部分不见了，这个是什么问题？
泡 泡 2008-03-29
变态的要求是，不仅是头部固定，而且，左边固定(客户名)，右边固定(小计),下边固定(总计)
reno_k 2007-12-10
很漂亮的CSS,的确不是想象中的复杂,而且还有详细的备注,谢谢LZ哦
让人感觉复杂主要是因为兼容不同的浏览器才看起来复杂,其核心是把table里的thead和tbody单独分开来了,并转成block对象
cai555 2007-12-10
静下心来看看，样式不像你想象的那么复杂
i_love_sc 2007-12-05
这里面css太复杂了。
shengnba 2007-12-05
样式的确还行!
HexUzHoNG 2007-12-04
Fixed IE7下的在IE6下运行不正常了，表头到表格下方去了。
firefox下运行正常
mr1234 2007-12-04
我也找了好久，看了很多，出了EXT就你的最榜
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

cai555
搜索本博客
最近加入圈子
存档
最新评论