本文介绍了一种使用HTML和CS代码实现表格头部固定的方法。通过特定的样式设置和编程逻辑，使得表格在滚动时头部保持可见。具体包括CSS定位属性的应用及后台加载过程。
1.html代码
<HTML>
<HEAD>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.fixedHeaderTr {}{ position:relative; top:expression(this.offsetParent.scrollTop); }
; .mainDiv {}{ overflow:auto; scrollbar-face-color:9999ff; height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20)); width:expression(document.body.clientWidth-20); }
</style>
</HEAD>
<body>
<br>
<div class="mainDiv">
<%=fixedHeader()%>
</div>
</body>
</HTML>
2.cs代码
public class FixTableHeader : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
// 用于固定table的表头
}
Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
protected string fixedHeader()
{
string str=@"<table width="+"/""+"100%"+"/"" +"border="+"/""+"1"+"/""+" cellspacing="+"/""+"0"+"/""+" style="+"/""+"MARGIN-TOP:-2px"+"/""+">";
str+="<TR class="+"/""+"fixedHeaderTr"+"/""+" style="+"/""+"BACKGROUND:navy;COLOR:white"+"/""+">";
str+="<TD nowrap>Header A</TD>";
str+="<TD nowrap>Header B</TD>";
str+="<TD nowrap>Header C</TD>";
str+="</TR>";
for(int m=0;m<100;m++)
{
str+="<TR>";
str+="<TD>A"+m+"</TD>";
str+="<TD>B"+m+"</TD>";
str+="<TD>C"+m+"</TD>";
str+="</TR>";
}
str+="</table>";
return str;
}
}
<HTML> <HEAD> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .fixedHeaderTr {}{ position:relative; top:expression(this.offsetParent.scrollTop); } ; .mainDiv {}{ overflow:auto; scrollbar-face-color:9999ff; height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20)); width:expression(document.body.clientWidth-20); } </style> </HEAD> <body> <br> <div class="mainDiv"> <%=fixedHeader()%> </div> </body></HTML>public class FixTableHeader : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { // 用于固定table的表头 } Web Form Designer generated code#region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base.OnInit(e); } /**//// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion protected string fixedHeader() { string str=@"<table width="+"/""+"100%"+"/"" +"border="+"/""+"1"+"/""+" cellspacing="+"/""+"0"+"/""+" style="+"/""+"MARGIN-TOP:-2px"+"/""+">"; str+="<TR class="+"/""+"fixedHeaderTr"+"/""+" style="+"/""+"BACKGROUND:navy;COLOR:white"+"/""+">"; str+="<TD nowrap>Header A</TD>"; str+="<TD nowrap>Header B</TD>"; str+="<TD nowrap>Header C</TD>"; str+="</TR>"; for(int m=0;m<100;m++) { str+="<TR>"; str+="<TD>A"+m+"</TD>"; str+="<TD>B"+m+"</TD>"; str+="<TD>C"+m+"</TD>"; str+="</TR>"; } str+="</table>"; return str; } }
扫一扫
1152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
