表格表头不动，正文滚动

xiaohe185 2009-02-06 04:26:15

我想实现表格（如GridView控件）的纵向和横向的表头不动，当拖动纵向滚动条时，正文滚动，表头始终可见；同样，当拖动横向滚动条时，纵向表头始终可见（如Excel),请问该如何实现啊？

...全文

952 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiaohe185 2009-02-06

打赏
举报

我要的就是这样的结果，但我同时还想实现纵向的表头也固定，不知可有什么方法

xiaohe185 2009-02-06

打赏
举报

问个不该问的问题，如何给分啊

xiaohe185 2009-02-06

打赏
举报

谢谢

supremeholy 2009-02-06

打赏
举报

顶9楼，这个可以。不知道是否符合楼主的要求。

D13ay 2009-02-06

打赏
举报

以下是C#精髓《月儿原创》第四讲中的代码，共同分享一下
代码：
<!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>
</html>

用法：CSS设如上的样式，HeaderStyle加CssClass="Freezing，套住GridView的Div设置高度宽度 <div style="overflow-y: scroll; height: 200px;width:200px" >

xiaohe185 2009-02-06

打赏
举报

有没有类似的例子呢？我初学JS,很多东西还不是很了解

bullion 2009-02-06

打赏
举报

需要做特效的，不建议使用GridView等控件，最好用JS + DIV + CSS

xiaohe185 2009-02-06

打赏
举报

先谢了。
但我想要实现的是出现滚动条，可以自己控制，且不仅横向表头不动，纵向表头也不动的那种，有没有什么方法实现呢

tonyze 2009-02-06

打赏
举报

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>



<script language="javascript">

var record = 6;//显示条数

var count = 24;//记录总数 

var pageTotal = ((count+record-1)/record)|0;//总页数 

var pagenum = 1;//将要显示的页码 

var the_timeout;



function changePage()

{

	pagenum++;

	if(pagenum>pageTotal){pagenum=1;}

	showhiddenRecord(pagenum);

}

 

//关闭

function closeTimeout()

{

	clearTimeout(the_timeout);

}





function showhiddenRecord(pagenum){ 

		//根据当前要显示的页码取得当前面里第一条记录的号码 

		pageBegin = (record*(pagenum-1)+1)|0; 

	

		//根据当前要显示的页码取得当前面里最后一条记录的号码 

		pageEnd = record*pagenum; 

		for(var i=1;i<=count;i++){ 

			if(i>=pageBegin && i<=pageEnd){ 

				mytable.rows[i].style.display=""; 

			}else{ 

				mytable.rows[i].style.display="none"; 

			} 

		} 

		//debugger;

		the_timeout = setTimeout(changePage,500);

} 

</script>



</head>



<BODY onLoad="showhiddenRecord(pagenum)"> 



<TABLE id="mytable" onmousemove="closeTimeout();" onmouseout="showhiddenRecord(pagenum);" cellpadding=4 cellspacing=1 border=0 bgcolor=#999999 width=500 align=center> 

<TR bgcolor="#336699" #ffffff><TD>标题</TD></TR> 

<TR bgcolor=#ffffff><TD>1</TD></TR> 

<TR bgcolor=#ffffff><TD>2</TD></TR> 

<TR bgcolor=#ffffff><TD>3</TD></TR> 

<TR bgcolor=#ffffff><TD>4</TD></TR> 

<TR bgcolor=#ffffff><TD>5</TD></TR> 

<TR bgcolor=#ffffff><TD>6</TD></TR> 

<TR bgcolor=#ffffff><TD>7</TD></TR> 

<TR bgcolor=#ffffff><TD>8</TD></TR> 

<TR bgcolor=#ffffff><TD>9</TD></TR> 

<TR bgcolor=#ffffff><TD>10</TD></TR> 

<TR bgcolor=#ffffff><TD>11</TD></TR> 

<TR bgcolor=#ffffff><TD>12</TD></TR> 

<TR bgcolor=#ffffff><TD>13</TD></TR> 

<TR bgcolor=#ffffff><TD>14</TD></TR> 

<TR bgcolor=#ffffff><TD>15</TD></TR> 

<TR bgcolor=#ffffff><TD>16</TD></TR> 

<TR bgcolor=#ffffff><TD>17</TD></TR> 

<TR bgcolor=#ffffff><TD>18</TD></TR> 

<TR bgcolor=#ffffff><TD>19</TD></TR> 

<TR bgcolor=#ffffff><TD>20</TD></TR> 

<TR bgcolor=#ffffff><TD>21</TD></TR> 

<TR bgcolor=#ffffff><TD>22</TD></TR> 

<TR bgcolor=#ffffff><TD>23</TD></TR> 

<TR bgcolor=#ffffff><TD>24</TD></TR> 

</TABLE> 

</BODY> 

</HTML>