how do I freeze gridview header within a div scrolling?

See more:

C#

ASP.NET

Javascript

CSS

Hi member I have a grid view inside a div which is the div that enable the scrolling as of now. However I would like to know how do I freeze the header while scrolling? I would like the header to still stay within the div thus there is a need to enable x & y scrolling as I do have many columns. I do not mind if its the div that scrolls or the grid view that scrolls.

<div style="width: 100%; height: 400px; overflow: auto" >
     
        <asp:GridView ID="Gridview1" runat="server" AllowSorting="True" AutoGenerateColumns="False" Width="100%" GridLines="Horizontal"  BorderStyle="Solid"  OnRowDataBound ="Gridview1_OnRowDataBound">
            <AlternatingRowStyle BackColor="White" />
            <columns>
                <asp:boundfield DataField="Columm1" HeaderText="Columm1"></asp:boundfield>
                <asp:boundfield DataField="Columm2" HeaderText="Columm2"></asp:boundfield>
                <asp:boundfield DataField="Columm3" HeaderText="Columm3"></asp:boundfield>
                <asp:boundfield DataField="Columm4" HeaderText="Columm4"></asp:boundfield>
                <asp:boundfield DataField="Columm5" HeaderText="Columm5"></asp:boundfield>
                <asp:boundfield DataField="Columm6" HeaderText="Columm6"></asp:boundfield>
                <asp:boundfield DataField="Columm7" HeaderText="Columm7"></asp:boundfield>
                <asp:boundfield DataField="Columm8" HeaderText="Columm8"></asp:boundfield>
                <asp:boundfield DataField="Columm9" HeaderText="Columm9"></asp:boundfield>           
            </columns>
            <EditRowStyle BackColor="#2461BF" />
                        <HeaderStyle BackColor="#507CD1" Font-Bold="False" ForeColor="Black" BorderStyle="Solid" BorderWidth="2px" />
                    </asp:GridView>

    </div><br />