CSS控制GridView固定表头

本文介绍了一种使用CSS和ASP.NET GridView控件实现表格滚动时表头固定的方案。通过特定的CSS样式和布局设置,使得在用户滚动表格数据的同时,表头保持可见状态,提升了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS代码

<style type="text/css">
     .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>
调用代码
     <div style="overflow-y: scroll; height: 200px; width: 300px">     <!--设置Div带滚动条-->
            
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="3"
                 BackColor
="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
                 Font-Size
="12px" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" AllowSorting="True">
                
<FooterStyle BackColor="White" ForeColor="#000066" />
                
<Columns>
                    
<asp:CommandField ShowSelectButton="True" />
                    
<asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" />
                    
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
                    
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
                    
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
                
</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>
 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值