GridView固定表头

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml" > 
  4. <head id="Head1" runat="server"> 
  5.     <title>GridView固定表头</title>
  6.     <style type="text/css"> 
  7.         .Freezing {position:relative;table-layout:fixed;top:expression(this.offsetParent.scrollTop);z-index: 10;} 
  8.         .Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
  9.     </style>  
  10. </head> 
  11. <body> 
  12.     <form id="form1" runat="server"> 
  13.     <div style="overflow-y: scroll; height: 200px;width:500px" id="dvBody"> 
  14.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="10" ForeColor="#333333" PageSize="3">  
  15.             <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> 
  16.             <Columns> 
  17.                 <asp:BoundField DataField="ID" HeaderText="用户ID" ReadOnly="True" />
  18.                 <asp:BoundField DataField="Name" HeaderText="用户姓名" /> 
  19.                 <asp:BoundField DataField="Sex" HeaderText="性别" /> 
  20.                 <asp:BoundField DataField="Birthday" HeaderText="生日" DataFormatString="{0:yyyy年M月dd日}" HtmlEncode="false" />
  21.                 <asp:BoundField DataField="Salary" HeaderText="薪水" />
  22.                 <asp:BoundField DataField="Address" HeaderText="家庭住址" /> 
  23.                 <asp:BoundField DataField="PostCode" HeaderText="邮政编码" />
  24.             </Columns> 
  25.             <RowStyle ForeColor="#000066" /> 
  26.             <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
  27.             <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> 
  28.             <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" CssClass="Freezing" /> 
  29.         </asp:GridView>
  30.     </div> 
  31.     </form> 
  32. </body> 
  33. </html>

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

你可能感兴趣的:(GridView固定表头)