CSS实现表头固定的表格

前段时间研究了一下CSS，写了这个固定表头的Grid，其中交替背色还是Hanson帮我实现的，用Dom的确是比较理想的方式，另外，鼠标Over事件最好不要用CSS 的expression来实现，效率非常低！

      DEMO1: http://www.whcgch.com/persionalweb/jowing/js/cssgrid.htm

　　代码：

编号 标题 类别 日期 点击

1 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

2 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

3 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

4 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

5 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

6 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

7 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

8 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

9 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

10 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

11 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

12 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

13 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

14 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

15 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

16 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

17 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

18 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

19 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

20 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

21 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

22 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

23 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

24 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

25 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

26 八部委宣布4月15日起所有网游推广防沉迷系统 国内新闻 2005年5月30日 34

<script>

function GridInit(){
 //该函数实现行的交替背景色以及onmouseover鼠标事件效果及点击事件绑定//
 oUL = document.getElementById('GridBody');
 oLIs = oUL.childNodes;
 var rowNum = 0;
 var oLI = null;
 for(var i = 0; i < oLIs.length; i++){
  oLI = oLIs[i];
  if(oLI && oLI.tagName == 'DIV' && oLI.id != 'GridHead'){
   oLI.onclick = function(){
    RowClick()
   }

   rowNum++;
   oLI.onmouseover = function(){
    this.className = 'DataGridRowSelect';
   };
   if(rowNum % 2 == 1){
    oLI.className = 'Bg1';    
    oLI.onmouseout = function(){
     this.className = 'Bg1';
    };
   }else{
    oLI.className = 'Bg2';
    oLI.onmouseout = function(){
     this.className = 'Bg2';
    };
   }
  }
 };
 
}

function RowClick()
{
 alert("点击了编号为:"+event.srcElement.parentNode.childNodes[0].innerHTML+"的记录!")
}
</script>

     这个是按百份比来设置长度的，不支持横向滚动功能。如果Grid的列较多的话，则Span需设为PX类型，用CSS实现起来很麻烦，而我实现的大概思路是用两个DIV　overflow，一个负责DataGrid横向滚动，一个负责DataBody的纵向滚动。代码就不贴了，有兴趣的可以参考: