求一固定表头(行列)的解决方案...急~

TimLeaf 2009-02-10 02:22:20


如图：固定红色边框中的部分：横向滑动滚动条，左边框固定；垂直滑动滚动条，上边框固定；左上角单元格一直固定...
仅仅需要对应IE6,7即可...在线等...
...全文
283 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
cansum396 2009-02-12
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 TimLeaf 的回复:]
引用 10 楼 cansum396 的回复:
expression
数据量大的时候非常慢

那还有什么办法吗？
无尽的需求啊...
[/Quote]

考虑分页,但列多的时候一样非常慢
TimLeaf 2009-02-11
  • 打赏
  • 举报
 回复 


<!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>

    <title></title>

    <style type="text/css">

    	#mainTable

		{

			font-size: 11pt;

		}



		#mainTable tr

		{

			height:20px;

		}



		#mainTable td

		{

			text-align: center;

			border-top-style:none;

			border-left-style:none;

		}



		#mainTable .FixedTitleRow1

		{

			position: relative;

			top: expression(this.offsetParent.scrollTop-2);

			background-color:#E7EFFF;

			z-index: 11;

			text-align: center;

		}



		#mainTable .FixedTitleRow2

		{

			position: relative;

			top: expression(this.offsetParent.scrollTop-2);

			background-color:#E7EFFF;

			z-index: 10;

			FONT-SIZE: 10pt;

			text-align: center;

		}



		#mainTable .FixedTitleRow3

		{

			position: relative;

			top: expression(this.offsetParent.scrollTop-2);

			background-color:#FFFFFF;

			z-index: 10;

			FONT-SIZE: 10pt;

			text-align: center;

		}



		#mainTable .FixedTitleRow4

		{

			position: relative;

			top: expression(this.offsetParent.scrollTop-2);

			background-color:#FFFFFF;

			z-index: 9;

			FONT-SIZE: 10pt;

			text-align: center;

		}



		#mainTable .FixedTitleColumn1

		{

			top:-1px;

			position: relative;

			left: expression(this.parentElement.offsetParent.scrollLeft-2);

			width:230px;

			background-color:#E7EFFF;

		}



		#mainTable .FixedTitleColumn2

		{

			top:-40px;

			position: relative;

			left: expression(this.parentElement.offsetParent.scrollLeft-2);

			width:230px;

			background-color:#FFFFFF;

			padding-top:40px;

		}



		#mainTable .mainDatatd

		{

			width: 120px;

		}



		#mainTable .mainDatatdBackColor

		{

			background-color: #FEE3F7;

			width: 120px;

		}





		#mainTable .SubTitletd

		{

			background-color: #E7EFFF;

			width: 40px;

		}



		#mainTable .ProductStandard

		{

			word-wrap:break-word;

			word-break:break-all;

			width:40px;

			text-align:left;

		}



		#mainTable .ProductPrice

		{

			word-wrap:break-word;

			word-break:break-all;

			width:40px;

			text-align:right;

		}



		#mainTable .FixedAllStoreColumn

		{

			width:80px;

			position: relative;

			left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-1);

			text-align: left;

		}



		#mainTable .FixedCatalogColumn1st

		{

			width:150px;

			position: relative;

			left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-1);

			text-align: left;

		}

		#mainTable .FixedCatalogColumn

		{

			width:150px;

			position: relative;

			left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-1);

			text-align: left;

			word-wrap:break-word;

			word-break:break-all;

		}

		#mainTable .FixedPlusColumn

		{

			width:10px;

			text-align:center;

			position:relative;

			left:expression(this.parentElement.offsetParent.parentElement.scrollLeft-1);

		}



		#mainTable .FixedBlockName

		{

			width:70px;

			text-align:left;

			position:relative;

			left:expression(this.parentElement.offsetParent.parentElement.scrollLeft-1);

		}



    </style>

</head>

<body>

	<div style="width: 300px;height: 200px;overflow:auto;">

		<table bordercolor="#BCD4F6" border="1" cellpadding="0" cellspacing="0" style="width:710px;" id="mainTable">

			<tr class="FixedTitleRow1">

				<td class="FixedTitleColumn1" colspan="3" rowspan="2">123456</td>

				<td class="mainDatatd" colspan="3">啊啊</td>

				<td class="mainDatatd" colspan="3">啊啊</td>

				<td class="mainDatatd" colspan="3">啊啊</td>

				<td class="mainDatatd" colspan="3">啊啊</td>

			</tr>

			<tr class="FixedTitleRow2">

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

				<td class="SubTitletd">呃呃</td>

			</tr>

			<tr class="FixedTitleRow3">

				<td class="FixedTitleColumn2" colspan="3" rowspan="4">啦啦啦啦</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

			</tr>

			<tr class="FixedTitleRow4">

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

			</tr>

			<tr class="FixedTitleRow4">

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

			</tr>

			<tr class="FixedTitleRow4">

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

				<td class="ProductStandard">123</td>

				<td class="ProductPrice">123</td>

			</tr>

		</table>

	</div>

</body>

</html>

大概这样的表头...
往下...利用这个样式：
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
background-color: #E6ECF0;
}
固定列...
参考：http://skyofdawn.javaeye.com/blog/262080
90天内只能改一次 2009-02-11
  • 打赏
  • 举报
 回复
mark,关注,帮顶
xiaohe185 2009-02-11
  • 打赏
  • 举报
 回复
<head runat="server">
<title>无标题页</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"/>
<meta name="CODE_LANGUAGE" Content="C#"/>
<meta name="vs_defaultClientScript" content="JavaScript"/>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"/>
<style type="text/css">
.fixedHeaderTr { POSITION: relative;; TOP: expression(this.offsetParent.scrollTop); }
.Freezing { POSITION: relative; ; LEFT: expression(this.offsetParent.scrollLeft) }
.Freez{
position:fixed;TOP: expression(this.offsetParent.scrollTop);LEFT: expression(this.offsetParent.scrollLeft)
}
.mainDiv { SCROLLBAR-FACE-COLOR: #9999ff; OVERFLOW: auto; ;
WIDTH: expression(document.body.clientWidth-20); ;HEIGHT: expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20)) }

</style>
</head>
<body>
<form id="form1" runat="server" method="post">
<div class="mainDiv" style="width:100%;height:768px;overflow-x:auto;overflow-y:auto;position:relative;">
<asp:GridView ID="GridView1" runat="server" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
BackColor="White" CellPadding="4" Height="150px" Width="856px">
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<Columns>
<asp:TemplateField HeaderText="客户编号">
<HeaderStyle BackColor="#990000" CssClass="Freez" />
<ItemStyle CssClass="Freezing" BackColor="#990000" />
<ItemTemplate>
<%# Eval("CustomerID") %>
</ItemTemplate>
</asp:TemplateField>

</Columns>
<RowStyle VerticalAlign="Middle" HorizontalAlign="Center" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" CssClass="fixedHeaderTr" Font-Bold="True" ForeColor="#FFFFCC" />

</asp:GridView>

</div>
<br />


</form>
</body>
TimLeaf 2009-02-10
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 cansum396 的回复:]
expression
数据量大的时候非常慢
[/Quote]
那还有什么办法吗？
无尽的需求啊...
cansum396 2009-02-10
  • 打赏
  • 举报
 回复
expression
数据量大的时候非常慢
xfreyes 2009-02-10
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 wang520d 的回复:]
http://www.cnblogs.com/webabcd/archive/2007/02/04/639830.html

去上面下载源代码。。完全满住你要实现的效果
[/Quote]

挺好
wang520d 2009-02-10
  • 打赏
  • 举报
 回复
http://www.cnblogs.com/webabcd/archive/2007/02/04/639830.html

去上面下载源代码。。完全满住你要实现的效果
shumark 2009-02-10
  • 打赏
  • 举报
 回复
能不能换个思路

把表格固定，数据部分做scroll
vlysses 2009-02-10
  • 打赏
  • 举报
 回复
固定表头在主页面，可移动部分在另一个页面，主页面通过一个iframe调用可移动部分的页面即可。
TimLeaf 2009-02-10
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 xsi640 的回复:]
红色框的div使用绝对定位...
或者
用frame
[/Quote]
根据数据源 生成使用这个方法的表...有难度...
我估计当数据多了之后，抖动会相当厉害吧...
xiaohe185 2009-02-10
  • 打赏
  • 举报
 回复
上面的代码可以固定横向表头，但不能同时固定纵向表头
关注
xiaohe185 2009-02-10
  • 打赏
  • 举报
 回复
<!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 runat="server">
<title>GridView固定表头http://blog.csdn.net/21aspnet </title>
<style>
.Freezing
{

position:relative ;
table-layout:fixed;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}

.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
</style>
</head>
<body style="font-size=12px">
<form id="form1" runat="server">
<div style="overflow-y: scroll; height: 200px;width:300px" id="dvBody">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="3" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing"
OnRowUpdating="GridView1_RowUpdating" OnRowCancelingEdit="GridView1_RowCancelingEdit" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px" OnRowCreated="GridView1_RowCreated" >
<FooterStyle BackColor="White" ForeColor="#000066" />
<Columns>
<asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True" />
<asp:BoundField DataField="邮政编码" HeaderText="邮政编码" SortExpression="邮政编码" />
<asp:BoundField DataField="家庭住址" HeaderText="家庭住址" />
<asp:BoundField DataField="姓名" HeaderText="姓名" />

</Columns>
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" CssClass="ms-formlabel DataGridFixedHeader"/>
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" CssClass="Freezing"/>
</asp:GridView>
</div>

</form>
</body>
xsi640 2009-02-10
  • 打赏
  • 举报
 回复
红色框的div使用绝对定位...
或者
用frame
来客心动 2009-02-10
  • 打赏
  • 举报
 回复
想了想，还是有可能可以实现的，将要滚动的区域放到一个div中，想地图一样，这个层在最下层，然后你拖动滚动条就就相当于拖动地图，试试看吧
JS固定表头和左边列V2.0（源码）
临时解决方案：在第3个参数(config)中指定 isBootstrap:true，或者也可以不指定，js会自动检测页面上有没有启用文件名为bootstrp的css（如果启用bootstrap.css，但文件名不是bootstrap，那请指定isBootstrap参数）。...
易语言程序免安装版下载
修改扩展界面支持库一，禁止透明标签在父窗口刷新时自动刷新，以解决其导致窗口刷新缓冲的问题。 8. 改进应用接口支持库中“设置屏幕分辨率”命令。 9. 修改外部数据库在“表中记录数为零”时可能导致程序崩溃的...
BootStrapTable表格利器通用教材
开发响应式界面，固定表头，完全可配置，支持data属性，显示/隐藏列，显示/隐藏表头，使用AJAX获取JSON数据，点击表头可简单的进行排序，支持自定义列显示，支持单/复选，强大的分页功能，支持名片布局，支持多语言 ...
asp.net知识库
一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上，会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与...
css控制固定表头，兼容行列合并
项目中设计的报表table设计的列数相对过多，当拖动下方的滚动条时无法对应表头所对应的列，因此在网上搜索了好一段日子，最后在网上找到了一些参考资料，然后总结归纳出兼容行列合并的固定表头demo。 多浏览器...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章