Горизонтальная полоса прокрутки не видна - ASP.Net

Question

Я включил Gridview с DIV для включения полос прокрутки, вертикальная полоса прокрутки работает нормально, но не горизонтальная полоса прокрутки, потому что столбцы вида сетки загромождаются. Я попытался установить ширину для столбцов gridview, но безрезультатно. Пожалуйста, помогите в настройке горизонтальной полосы прокрутки. Я новичок в программировании.

<div style="width: 100%; height: 400px; overflow-x: auto" runat="server">

    <asp:GridView ID="GridView1" runat="server" DataKeyNames="id" AutoGenerateColumns = "false"
    AllowPaging = "true" PageSize = "10"  Font-Names = "Arial" 
    Font-Size = "11pt" AlternatingRowStyle-BackColor = "white"  
    HeaderStyle-BackColor = "#007acc"  OnPageIndexChanging = "OnPaging"
    OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDeleting="GridView1_RowDeleting">

 <Columns>
    <asp:CommandField HeaderText="Update" ShowSelectButton="True" ButtonType="Image" SelectImageUrl="~/Images/edit.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">  
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Images/delete.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:BoundField ItemStyle-Width="10px" DataField="id" HeaderText="ID" 
    ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"
    InsertVisible="False" ReadOnly="True" NullDisplayText="&quot;&quot;">
    <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
    <ItemStyle HorizontalAlign="Left" Width="10px"></ItemStyle> </asp:BoundField>

     <asp:BoundField DataField="PurchasedOn" HeaderText="Valid From" 
     ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left">
     <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
     <ItemStyle HorizontalAlign="Left" Width="130px"></ItemStyle>
     </asp:BoundField>

    </Columns>
    </asp:GridView>
        </div>

Answer 1

Попробуйте этот блок кода ниже.

<div style="width: 100%; height: 400px; overflow-x: auto" runat="server">

    <asp:GridView ID="GridView1" runat="server" DataKeyNames="id" AutoGenerateColumns = "false"
    AllowPaging = "true" PageSize = "10"  Font-Names = "Arial" 
    Font-Size = "11pt" AlternatingRowStyle-BackColor = "white"  
    HeaderStyle-BackColor = "#007acc"  OnPageIndexChanging = "OnPaging"
    OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDeleting="GridView1_RowDeleting"  width="100%" style="overflow-x:auto;"> **//Horizontal scroll overflow:auto --> both v & H scroll , overflow-y:auto for V //scroll.**


 <Columns>
    <asp:CommandField HeaderText="Update" ShowSelectButton="True" ButtonType="Image" SelectImageUrl="~/Images/edit.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">  
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Images/delete.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:BoundField ItemStyle-Width="10px" DataField="id" HeaderText="ID" 
    ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"
    InsertVisible="False" ReadOnly="True" NullDisplayText="&quot;&quot;">
    <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
    <ItemStyle HorizontalAlign="Left" Width="10px"></ItemStyle> </asp:BoundField>

     <asp:BoundField DataField="PurchasedOn" HeaderText="Valid From" 
     ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left">
     <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
     <ItemStyle HorizontalAlign="Left" Width="130px"></ItemStyle>
     </asp:BoundField>

    </Columns>
    </asp:GridView>
        </div>