How to get horizontal and vertical scroller for the GridView with freezed header and column?

See more:

C#

ASP.NET

I am trying to freeze the Header and the First columns for the GridView. I am using this tutorial and everything works fine. All what I need now is just having vertical and horizontal scroller with minimizing the width for GridView. I tried to do that by putting the GridView inside the following div, but it did not work well with me. The Freezed column and header go out of the table:

<div style="width:700px; height:300px; overflow:auto; overflow-y:auto;">
    </div>

Here's is the CSS code:

<style>
            div#div-datagrid {
            width: 220px;
            height: 100px;
            overflow: auto;
            scrollbar-base-color:#ffeaff;
            }
    
            /* Locks the left column */
            td.locked, th.locked {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            background-color: navy;
            color: white;
            border-right: 1px solid silver;
            position:relative;
            cursor: default;
            /*IE5+ only*/
            left: expression(document.getElementById("div-datagrid").scrollLeft-2);
            }
    
            /* Locks table header */
            th {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            background-color: navy;
            color: white;
            border-right: 1px solid silver;
            position:relative;
            cursor: default;
            /*IE5+ only*/
            top: expression(document.getElementById("div-datagrid").scrollTop-2);
            z-index: 10;
            }
    
            /* Keeps the header as the top most item. Important for top left item*/
            th.locked {z-index: 99;}
    
            /* DataGrid Item and AlternatingItem Style*/
            .GridRow {font-size: 10pt; color: black; font-family: Arial;
                         background-color:#ffffff; height:35px;}
            .GridAltRow {font-size: 10pt; color: black; font-family: Arial;
                         background-color:#eeeeee; height:35px;}
            </style>

And here's the ASP.NET code:

<div style="width:700px; height:300px; overflow:auto; overflow-y:auto;">
                        <asp:GridView ID="fixedHeaderScrollableGridView" runat="server" 
                                        AllowSorting="True" 
                                        CellPadding="3" 
                                        DataSourceID="SqlDataSource1" 
                                        ClientIDMode="Static"
                                        CssClass="mGrid"
                                        AlternatingRowStyle-CssClass="alt" 
                                        RowStyle-HorizontalAlign="Center" 
                                        OnRowDataBound="GridView1_RowDataBound" OnPreRender="GridView1_PreRender">
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <HeaderStyle Font-Bold = "true" ForeColor="Black"/> 
                            <Columns>
                                <%--<asp:CommandField ShowSelectButton="True" />--%>
                            </Columns>
                            <EditRowStyle BackColor="#999999" />
                            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                            <SortedAscendingCellStyle BackColor="#E9E7E2" />
                            <SortedAscendingHeaderStyle BackColor="#506C8C" />
                            <SortedDescendingCellStyle BackColor="#FFFDF8" />
                            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                        </asp:GridView>
                    </div>

So how can I get a GridView with Freezed Header and Column, and Vertical and Horizontal Scroller?