css控制固定表头，兼容行列合并_html/css_WEB-ITnose

项目中设计的报表table设计的列数相对过多，当拖动下方的滚动条时无法对应表头所对应的列，因此在网上搜索了好一段日子，最后在网上找到了一些参考资料，然后总结归纳出兼容行列合并的固定表头demo。 

多浏览器没有做太多测试，在ie6中已测试通过。 

功能期待了很久今天终于找到解决的方式，总结到javaeye中方便日后查阅。实现方式可能还有更好的，希望有大牛路过，给我留点更好的实现例子作日后交流之用。 

以下是相关的css 

Html代码  

2.    
3.   

以下是HTML 

Html代码  

1. 利用CSS代码让Table产生固定表头

     
2.   
3.   
       
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

   	列头	列头	列头
   h1	h2	h3	h4	h5
   a	单元格2	单元格3	单元格4	单元格5	单元格5
   b	单元格2	单元格3	单元格4	单元格5	单元格5
   c	单元格2	单元格3	单元格4	单元格5	单元格5
   d	单元格2	单元格3	单元格4	单元格5	单元格5
   e	单元格2	单元格3	单元格4	单元格5	单元格5
   f	单元格2	单元格3	单元格4	单元格5	单元格5
   g	单元格2	单元格3	单元格4	单元格5	单元格5

     

  

另外补充一点，如果在表头合并的是最后一行的时候，排版将出现问题。由于上面合并的只有两行，因此样式没有受到改变，如果要处理，暂时的解决办法就是不合并rowspan最后一行，将其多行显示，有点牵强，但找不到解决办法。类似情况如下图： 

 

找了些资料可作参考： 
http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx 
文章中亦说没有办法解决上述的这个问题，留待日后有更好的解决方案。