Grid view static header in asp.net

问题:

I have a grid view i want a fixed header without style of overflow=scroll. that is when their is a more records the grid view scroll by default.now how i can show fixed header.

this is my grid view.

          <asp:GridView ID="gvStd" runat="server" DataKeyNames ="ID" AutoGenerateColumns="False" OnRowDataBound="gvStd_RowDataBound" 
            CssClass="table" EnableViewState="False" EmptyDataText="Such Not Found!"
            CellPadding="4" ForeColor="#333333" GridLines="None" OnRowCommand ="gvStd_RowCommand"  BorderStyle="None" >
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333"  CssClass="HeaderFreez"/>


            <Columns>

              <asp:TemplateField HeaderText="School Code" >

                    <ItemTemplate>
                        <asp:Label ID="lblSchoolCode" runat="server" 
          Text='<%# Bind("SCHOOL_CODE")%>'  />
                           <asp:TextBox ID="ID_TO_Update_All"  
               runat="server" Text='<%# Bind("ID")%>'  Visible="false" />
                    </ItemTemplate>

                </asp:TemplateField>
                <asp:TemplateField HeaderText="Class">
                    <ItemTemplate>
                        <asp:Label ID="lblClass" runat="server" Text='<%# 
              Bind("CLASS") %>'   Visible="true"/>

                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Sec">

                    <ItemTemplate>
                        <asp:Label ID="lblSection" runat="server" Text='<%# 
            Bind("SECTION") %>'   Visible="true"/>

                    </ItemTemplate>
                </asp:TemplateField>
     </Columns>
            <FooterStyle BackColor="#990000" Font-Bold="True" 
       ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" 
         HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" 
       ForeColor="Navy" />
            <HeaderStyle BackColor="#00ba8b" Font-Bold="True" 
          ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>

回答1:

<style>
     th {
        background: cornflowerblue!important;
        color:white!important;
        position: sticky!important;
        top: 0;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
    th, td {
        padding: 0.25rem;
    }
</style>

1. Simply Add this styling in Head Tag of your webform.
2. Directly add in your master page header for appling it to all sub pages.

回答2:

Follow these steps:

1. Add HeaderStyle-Width="80px" ItemStyle-Width="80px" to your header template.
2. Add this to grid style="height:400px; overflow:auto"

3. Add the following CSS somewhere on the page

   <style type="text/css">
     .FixedHeader {
       position: absolute;
       font-weight: bold;
    }     
   </style> 
   

4. Finally, your gridView tag should be like this

   <asp:GridView ID="gvStd" runat="server" style="height:400px; 
    overflow:auto" HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen"
    AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" 
    OnRowDataBound="gvStd_RowDataBound">
   

5. If the first row gets overlapped, try adding this code:

   protected void gvStd_RowDataBound(object sender, GridViewRowEventArgs e)
   {
     if (e.Row.RowType == DataControlRowType.DataRow)
     {
        if (e.Row.RowIndex == 0)
            e.Row.Style.Add("height", "50px");
     }
   } 
   

回答3:

You can try this if you want pagination instead of scrolling, in that way your gridview header will be static.

<asp:GridView ID="gvStd" runat="server" AllowPaging="true" PageSize="10" ...>

I am using 10 rows/page. You can modify that with PageSize="**"