GridView固定表头(不用javascript只用CSS!,很好用)

GridView固定表头(不用javascript只用CSS!,很好用)

效果图:


代码:
<!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" >

posted @   thinksea  阅读(146)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示