水平滚动条不可见-ASP.Net

Question

我已经用DIV封装了Gridview来启用滚动条，垂直滚动条可以正常工作，但是水平滚动条却不能，因为Gridview列变得混乱。我尝试设置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>