开始在网上找了资料挺高兴,但是放在自己的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>
分享到:
相关推荐
c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试 c# gridview 滚动条固定表头 IE已测试
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头不动,实践得出来的结果 我用的是VS2010,C#
用于ASP.NET平台下的GridView 表头可以固定,表身可滚动。完整的源码,可以直接在VS2008以上的版本中进行运行测试。
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头固定不动 实践中所得一个具体实例 VS2010,C#
gridview固定冻结列与表头gridview固定冻结列与表头
这个与asp.net中GridView相关的一个实例,实现GridView冻结表头和列,挺好用的。
qml 实现gridview带滚动条和翻页,通过滚动可以实现页数变化,通过点击页数或翻页键可以实现滚动条变化
GridView 固定表头和列 只需几行代码就能搞定,非常简单
GridView固定表头和首列(不随滚条滚动),css实现
gridview固定表头 横向滚动 纵向固定,即拖动横向滚动条时,表头随着表体移动,纵向拖动滚动条时,表头固定不动 实践中所得一个具体实例 VS2010,C#
GridView系列---GridView固定表头
gridview冻结表头和列 gridview冻结表头和列 gridview冻结表头和列 gridview冻结表头和列 gridview冻结表头和列 gridview冻结表头和列
ASP.NET固定GridView表头_SuperTables
1.主要利用table style的 layout=fixed属性按照当前表头再copy一个table,显示在当前datagrid或gridview的前面. 2.注意:调用的时候,datagrid 或gridview 要有style="table-layout:fixed" 和 width=?? 属性.
C#语言 GridView创建2行表头,合并表头列代码。
.rar
GridView动态表头合并,GridView动态表头合并,GridView动态表头合并
之前上传一个资源css冻结表头冻结第一列,有评论说有些浏览器不兼容,针对这一问题用jquery来...Gridview 固定行与列,jquery实现 兼容IE6-IE10,谷歌,火狐等多种常用版本浏览器。 asp.net程序下载资源可以直接使用
代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...new System.Data.Dat
我们可以考虑给GridView加入水平滚动条来展示数据来自51ASPX。 Add Jquery reference to the master page. Create a style as follows. As you see width is specified as 200px initially. Later using the JQuery...