GridView(table) 滚动条固定表头、列

最新推荐文章于 2026-07-30 20:17:50 发布

原创最新推荐文章于 2026-07-30 20:17:50 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

技术

本文介绍了如何在ASP.NET的GridView中实现滚动条时保持表头和列固定，提供了一种CSS样式解决方案，适用于W3C标准。内容包括相关CSS类的定义和HTML结构，可用于实现表格在滚动时保持表头和列位置不变。

开始在网上找了资料挺高兴，但是放在自己的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"> </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"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </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"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td>
  </tr>
</table>
</span>
    </div>
    </form>
</body>
</html>