开始在网上找了资料挺高兴,但是放在自己的ASP.NET代码中却产生奇怪的效果。经过测试摸索终于全部解决了,贴出来与大家一起分享。

 解决了声明W3C标准时滚动条的问题

 

适易工作流、项目管理平台、基于XML配置的快速信息管理系统开发平台

试用及下载地址:​​http://121.18.78.216​

联系人:贾世义

电话:15832292227 QQ: 914734554 邮箱:jsyhello@gmail.com

谢谢您阅读,真诚希望能交流合作

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​">
<html xmlns="​​​http://www.w3.org/1999/xhtml​​​">
<head id="Head1"><title>
 GridView(table)固定表头、列 贾世义 ​​​http://121.18.78.216/​​​</title>
    <style type="text/css">
.list
{

/*改为 100% 并将overflow-x:hidden 则不显示横向滚动条*/
 width:390px;
 overflow-x:auto;

/*改为 100% 并将overflow-y:hidden 则不显示纵向滚动条*/
 height:120px;
 overflow-y:auto;
    clear: both;
    border: 1px solid #eeeeee;
/*很重要 没有此项固定的行列将漂起来 */

    position: relative;
    z-index:3;
}

/*固定列 样式*/
.scrollRowThead
{
    position: relative;
    table-layout: fixed;
/*利用offsetParent 在W3C标准下获取的是table 而不是div 所以需要根据层级直接写*/
    left: expression(this.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft);
    background-color:#eeeeee;
    z-index:0;
}

/*固定标题 样式*/
.scrollColThead {
 position: relative;
    table-layout: fixed;

/*利用offsetParent 在W3C标准下获取的是table 而不是div 所以需要根据层级直接写*/
    top: expression(this.parentElement.parentElement.parentElement.parentElement.scrollTop);
    background-color:#eeeeee;
    z-index:1;
}

/*交叉 向上提 不然会被覆盖不好看*/
.scrollCR {
     z-index:2;
}
    </style>
</head>
<body style="font-size: 12px">
    <form name="form1" method="post" action="Test.aspx" id="form1">
<div>
    <div class="list">
        <span>
 <table cellspacing="0" cellpadding="3" rules="all" border="1" id="GridView1" style="background-color:White;border-color:#EEEEEE;border-width:1px;border-style:None;font-size:12px;border-collapse:collapse;">
  <tr class="scrollColThead" class="scrollColThead" style="background-color:#EEEEEE;font-weight:bold;">
   <th class="scrollRowThead scrollCR" nowrap="nowrap" scope="col">ID</th><th class="scrollRowThead scrollCR" nowrap="nowrap" scope="col">Name</th><th nowrap="nowrap" scope="col">Iflag</th><th nowrap="nowrap" scope="col">DepID</th><th nowrap="nowrap" scope="col">Pwd</th><th nowrap="nowrap" scope="col">email</th><th nowrap="nowrap" scope="col">Tel</th><th nowrap="nowrap" scope="col">Sn</th><th nowrap="nowrap" scope="col">startdate</th><th nowrap="nowrap" scope="col">WorkGradeID</th><th nowrap="nowrap" scope="col">IsEffort</th>
  </tr><tr>
   <td class="scrollRowThead" nowrap="nowrap">admin</td><td class="scrollRowThead" nowrap="nowrap">管理员</td><td nowrap="nowrap">1</td><td nowrap="nowrap">1007</td><td nowrap="nowrap">admin</td><td nowrap="nowrap">jsyhello76@126.com</td><td nowrap="nowrap">请勿动</td><td nowrap="nowrap">0</td><td nowrap="nowrap">2011-4-5 0:00:00</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">1</td>
  </tr><tr>
   <td class="scrollRowThead" nowrap="nowrap">jiashiyi</td><td class="scrollRowThead" nowrap="nowrap">贾世义</td><td nowrap="nowrap">1</td><td nowrap="nowrap">1007</td><td nowrap="nowrap">admin</td><td nowrap="nowrap">jsyhello@gmail.com</td><td nowrap="nowrap">15832292227</td><td nowrap="nowrap">0</td><td nowrap="nowrap">2011-4-5 0:00:00</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">1</td>
  </tr><tr>
   <td class="scrollRowThead" nowrap="nowrap">jiazhichen</td><td class="scrollRowThead" nowrap="nowrap">贾子宸</td><td nowrap="nowrap">1</td><td nowrap="nowrap">1007</td><td nowrap="nowrap">admin</td><td nowrap="nowrap">jsyhello@163.com</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td>
  </tr><tr>
   <td class="scrollRowThead" nowrap="nowrap">lijingping</td><td class="scrollRowThead" nowrap="nowrap">李建平</td><td nowrap="nowrap">1</td><td nowrap="nowrap">1007</td><td nowrap="nowrap">admin</td><td nowrap="nowrap">jiachen87@126.com</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td><td nowrap="nowrap">&nbsp;</td>
  </tr>
 </table>
</span>
    </div>
    </form>
</body>
</html>