Beyond the dream——飛雪飄寒

————磨難不過是人生鍵盤的回車。。。。。。
posts - 84, comments - 637, trackbacks - 38, articles - 32
  博客园 :: 首页 ::  :: 联系 :: 订阅 订阅 :: 管理

实现固定多层表头的总结与分享

Posted on 2009-02-16 11:48 飛雪飄寒 阅读(2680) 评论(5)  编辑 收藏 所属分类: 学习总结, CSS

　　前几天忙于table固定多层表头的实现，现对其实现过程进行总结如下：

　　思路1：完全通过样式来实现，但实现过程中发现页面在Visual Studio 2008、Dreamweaver等开发工具中预览没有任何问题，但在IE显示的时候表头显示不正常，具体问题可参见 求“table固定多层表头”所遇问题的解答!   ，有博友说是“IE的BUG吧。实际的rowspan居然与位于第几行有关（顶部的没多，位于第二行的，多一行，位于第三行的，多二行……）。试几种方法都避不开。”，具体是什么原因到现在还没弄明白（此思路暂未能实现，具体原因还没找到，希望知道的博友帮忙回答一下）；

　　思路2：通过JS+样式来实现，先把完整表画在页面上，然后在页面加载后，利用脚本，把表头部分在原表中隐藏，之后，在这张完整数据表的上面加一个单独的表，这个表只装表头，不过在统一两个表的列宽的时候花费了我不少力气（此思路已实现）。
   
思路2实现效果图：

思路2实现代码：

Code


思路1实现固定单层表头（奇怪，使用同样的方法，对于实现固定单表头成功，但对于实现固定多层表头却有问题）：

效果图如下：


实现代码：

Code

 

     思路1实现固定单表头及固定列：

效果图：


实现代码：

Code

实现表头固定，表体可滚动的GridView：

效果图：


实现方式及代码可参考：http://blog.csdn.net/net_lover/archive/2006/10/10/1328729.aspx


本文参考资料：
http://www.dlmu.net/pe/webdesign/ShowArticle.asp?ArticleID=26970
http://blog.csdn.net/szwangdf/archive/2008/07/31/2750468.aspx

0
0
(请您对文章做出评价)
« 上一篇：求“table固定多层表头”所遇问题的解答!
» 下一篇：CSS小技巧：利用CSS，给WEB页面强制分页，用于打印！

Feedback

#1楼   回复  引用  查看    

2009-02-16 23:15 by Sail      
这个我这也有些解决方法，
改天再来与兄弟讨论。

#2楼[楼主]   回复  引用  查看    

2009-02-17 09:29 by 飛雪飄寒      
@Sail
有什么其它好方法，咱们交流一下！

#3楼   回复  引用  查看    

2009-02-17 10:01 by Mervin      
呵呵，这个我搞过啊，也发现了些规律，在限制列宽的时候最好不用固定宽度，
用固定宽度，内容长短不一很可能撑乱掉，我发现用百分比控制可以解决这个问题，几列的宽度之和加起来要刚好100%,这样就不会乱掉。。

#4楼   回复  引用  查看    

2009-02-17 10:47 by 腾云驾雾      
Mark

#5楼[楼主]   回复  引用  查看    

2009-03-13 17:38 by 飛雪飄寒      
本实例在改变窗口大小时会出现表头部分和数据部分对不齐的BUG，故应追加以下代码：
function getHeadTableWidth()
{
var tHeadWidth = document.all["d1"].offsetWidth;
divThead=document.getElementById('headtable');
divThead.style.width = tHeadWidth;
}
window.onresize=function(){getHeadTableWidth()};
以上JS的作用是，当改变窗口大小时，重新获取表头部分的宽度，从而使表头部分与数据部分对齐；
window.onresize用于触发当窗口大小改变时的事件，具体说明可参考：http://www.fzs8.net/Java/JavaScript/2007-05-25/3960.html