在前面的文章中，我介绍了如何是使用CSS在IE中实现固定表头的实现，但是在FF中却不能实现这个功能，主要是FF不支持在CSS中使用expression，今天在整理兼容的时候，我顺便测试了以下，经过修改CSS，在IE下面可以完全实现，但是FF只能部分实现，等待达人点解了。

在测试过程中，又一次的碰到了rowspan在position:relative下的解析错误问题，从网上找了很多资料，都无法解决，继续郁闷中。

本次的修改使用的技术为CSS Hack，这个在很多站点有介绍，我使用最简单的CSSHack技术，就是

在CSS中如果存在FF和IE不一致的地方，先写FF的CSS，然后使用*Hack编写对应的IE的CSS，这样在IE下则自动取得后面的CSS，而在FF下则认为*开头的CSS无效。

 image

这里显示的就是FF的提示信息。虽然有警告，但是我们的目的达到了，呵呵，要的就是这个效果。

OK，先放出正式的CSS 

   1: div.c{background-color:white;overflow:auto;width:100%;*height:100%;border:solid 2px red;}

   2: table.t{width:100%}

   3: table.t tbody{height:300px;overflow-y:auto;overflow-x:hidden;*height:auto;*overflow:hidden;}

   4: table.t tbody td{background-color:white;}

   5: table.t thead tr{position:relative;top:*expression(this.offsetParent.scrollTop-2);}    

   6: table.t thead td{position:relative;background-color:#ccc;font-weight:bold;}

解说一下：

在IE下面的原理可以参考我前面的文章，我只说在FF下的原理

在FF下将TBody设置成overflow:auto，这里存在一个问题,TBody设置了overflow-x并不会产生横向滚动条，不知道为什么哦。

在FF下可不用设置DIv.C的属性，因为会自动延伸，而必须设置Tbody的高度，否则不会产生效果，而且最郁闷的是，必须设置绝对的像素值。

在FF下显示的效果如下

image

注意，地下的那个横向滚动条实际是DIV的，而不是Table的，为了方便参考，我贴出IE的图片

image

看出滚动条的差别了没有？右下角看看滚动条是如何衔接的？

BTW：上图存在的COl4跨行错误就是我所说的IE的rowspan错误。

以下为几个有用的链接：

http://cross-browser.com/x/examples/xtable.html

http://www.stansight.com/sort/LockTableHeadSort.html

但是都不是很完美，直接使用JS实现，则显得过于唐突，所以不使用这些站点提供的代码

看了又看，有人比我讲解的更加详细

http://birdshome.cnblogs.com/archive/2006/05/01/ScrollTable.html

http://www.cnblogs.com/birdshome/archive/2006/05/13/ScrollTableDetails.html