Gridview的宽度超出了边界,因为内容宽度更大了

本文关键字:因为 大了 Gridview 边界 | 更新日期: 2023-09-27 18:11:45

     <div style="padding-top: 10px; padding-right: 15px; padding-bottom: 25px">
    <div class="table">
       <div>
            <asp:GridView ID="gvList" runat="server" AutoGenerateColumns="false" 
      DataKeyNames="UserId" AllowSorting="true" onrowcreated="gvList_RowCreated" 
     onrowdatabound="gvList_RowDataBound" 
     onsorting="gvList_Sorting">
                <AlternatingRowStyle CssClass="even" />
                <EmptyDataTemplate>
                     Records for selected criteria do not exist
                </EmptyDataTemplate>
                 <Columns>
       <asp:TemplateField>
       <ItemStyle Width="2%"/>
       <HeaderTemplate>
            <asp:Label ID="lblSelect" runat="server" Text="<%$ Resources:LBShowcaseRes,lblSelect %>"></asp:Label>
       </HeaderTemplate>
       <ItemTemplate>
            <asp:CheckBox ID="chkSelect" runat="server" />
       </ItemTemplate>
       </asp:TemplateField>
       <asp:TemplateField>
       <ItemStyle width="15%"/>
       <HeaderTemplate>
       <asp:LinkButton ID="lnkFirstName" runat="server" Text="<%$ Resources:LBShowcaseRes,lblFirstName %>" CommandName="Sort" CommandArgument="FirstName"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
             <asp:Label ID="lblFirstName" runat="server" Text='<%#Eval("FirstName") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField>   
       <asp:TemplateField>
       <ItemStyle Width="18%"/>
       <HeaderTemplate>
               <asp:LinkButton ID="lnkLastName" runat="server" Text="<%$ Resources:LBShowcaseRes,lblLastName %>" CommandName="Sort" CommandArgument="LastName"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
              <asp:Label ID="lblLastName" runat="server" Text='<%#Eval("LastName") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField>   
       <asp:TemplateField>
       <ItemStyle Width="20%"/>
       <HeaderTemplate>
              <asp:LinkButton ID="lnkEmailId" runat="server" Text="<%$ Resources:LBShowcaseRes,lblEmailid %>" CommandName="Sort" CommandArgument="EmailAddress"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
              <asp:Label ID="lblEmailId" runat="server" Text='<%# Eval("EmailAddress") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField> 
       <asp:TemplateField> 
       <ItemStyle Width="15%" />
       <HeaderTemplate>
              <asp:Label ID="lblUserName" runat="server" Text="<%$ Resources:LBShowcaseRes,lblUserName %>"></asp:Label>
       </HeaderTemplate>
       <ItemTemplate>
              <asp:TextBox ID="txtUserName" runat="server" Text='<%# Eval("UserName") %>' MaxLength="75" Width="100px" EnableViewState="true"></asp:TextBox>
       </ItemTemplate>
       </asp:TemplateField>  
       <asp:TemplateField>
       <ItemStyle Width="10%" />
       <HeaderTemplate>
               <asp:LinkButton ID="lnkOffice" runat="server" Text="<%$ Resources:LBShowcaseRes,lblOffice %>" CommandName="Sort" CommandArgument="OfficeName"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
               <asp:Label ID="lblOffice" runat="server" Text='<%# Eval("OfficeName") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField>
       <asp:TemplateField>
       <ItemStyle Width="20%" />
       <HeaderTemplate>
                <asp:Label ID="lblRolePrompt" runat="server" Text="<%$ Resources:LBShowcaseRes,lblRole %>"></asp:Label>
       </HeaderTemplate>
       <ItemTemplate>
                <asp:HiddenField ID="hdnRole" runat="server" Value='<%# Eval("RoleName") %>' />
                <asp:DropDownList ID="ddlRole" runat="server" AppendDataBoundItems="true">
                </asp:DropDownList>
       </ItemTemplate>
       </asp:TemplateField>
    </Columns>
            </asp:GridView>
        </div>

        <div class="table-nav">
        <asp:Button ID="btnDelete" runat="server" Text="<%$ Resources:LBShowcaseRes,btnDelete %>"  SkinID="leftButton" 
            OnClientClick="var values= GetSelectedUser();return ConfirmDeleteWithValues('Please select at least one User for deletion.',values);" 
            onclick="btnDelete_Click" />              
        <asp:Button ID="btnPrintExport" runat="server" Text="<%$ Resources:LBShowcaseRes,btnPrintRep %>" CausesValidation="false"/>
        <asp:Button ID="btnSave" runat="server" OnClientClick="return ConfirmAddUser();"
            Text="<%$Resources:LBShowcaseRes,btnSave %>"  
            onclick="btnSave_Click" />
        </div>
        <div class="clear">
        </div>
    </div>
</div>

我的表CSS是表{border-collapse: collapse;宽度:100%}

现在当我运行页面时,gridview的宽度将超出100%,因为内容宽度非常大…所以我想让它在达到列的宽度后打断内容我该怎么做PLZ帮帮我.......

修改所选标准的记录不存在

                 <Columns>
       <asp:TemplateField>
       <ItemStyle Width="20px"/>
       <HeaderTemplate>
            <asp:Label ID="lblSelect" runat="server" Text="<%$ Resources:LBShowcaseRes,lblSelect %>"></asp:Label>
       </HeaderTemplate>
       <ItemTemplate>
            <asp:CheckBox ID="chkSelect" runat="server" />
       </ItemTemplate>
       </asp:TemplateField>
       <asp:TemplateField>
       <ItemStyle width="35px"/>
       <HeaderTemplate>
       <asp:LinkButton ID="lnkFirstName" runat="server" Text="<%$ Resources:LBShowcaseRes,lblFirstName %>" CommandName="Sort" CommandArgument="FirstName"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
             <asp:Label ID="lblFirstName" runat="server" Text='<%#Eval("FirstName") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField>   
       <asp:TemplateField>
       <ItemStyle Width="35px"/>
       <HeaderTemplate>
               <asp:LinkButton ID="lnkLastName" runat="server" Text="<%$ Resources:LBShowcaseRes,lblLastName %>" CommandName="Sort" CommandArgument="LastName"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
              <asp:Label ID="lblLastName" runat="server" Text='<%#Eval("LastName") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField>   
       <asp:TemplateField>
       <ItemStyle Width="35px"/>
       <HeaderTemplate>
              <asp:LinkButton ID="lnkEmailId" runat="server" Text="<%$ Resources:LBShowcaseRes,lblEmailid %>" CommandName="Sort" CommandArgument="EmailAddress"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
              <asp:Label ID="lblEmailId" runat="server" Text='<%# Eval("EmailAddress") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField> 
       <asp:TemplateField> 
       <ItemStyle Width="35px" />
       <HeaderTemplate>
              <asp:Label ID="lblUserName" runat="server" Text="<%$ Resources:LBShowcaseRes,lblUserName %>"></asp:Label>
       </HeaderTemplate>
       <ItemTemplate>
              <asp:TextBox ID="txtUserName" runat="server" Text='<%# Eval("UserName") %>' MaxLength="75" Width="100px" EnableViewState="true"></asp:TextBox>
       </ItemTemplate>
       </asp:TemplateField>  
       <asp:TemplateField>
       <ItemStyle Width="35px" />
       <HeaderTemplate>
               <asp:LinkButton ID="lnkOffice" runat="server" Text="<%$ Resources:LBShowcaseRes,lblOffice %>" CommandName="Sort" CommandArgument="OfficeName"></asp:LinkButton>
       </HeaderTemplate>
       <ItemTemplate>
               <asp:Label ID="lblOffice" runat="server" Text='<%# Eval("OfficeName") %>'></asp:Label>
       </ItemTemplate>
       </asp:TemplateField>
       <asp:TemplateField>
       <ItemStyle Width="50px" />
       <HeaderTemplate>
                <asp:Label ID="lblRolePrompt" runat="server" Text="<%$ Resources:LBShowcaseRes,lblRole %>"></asp:Label>
       </HeaderTemplate>
       <ItemTemplate>
                <asp:HiddenField ID="hdnRole" runat="server" Value='<%# Eval("RoleName") %>' />
                <asp:DropDownList ID="ddlRole" runat="server" AppendDataBoundItems="true">
                </asp:DropDownList>
       </ItemTemplate>
       </asp:TemplateField>
    </Columns>
            </asp:GridView>
        </div>

        <div class="table-nav">
        <asp:Button ID="btnDelete" runat="server" Text="<%$ Resources:LBShowcaseRes,btnDelete %>"  SkinID="leftButton" 
            OnClientClick="var values= GetSelectedUser();return ConfirmDeleteWithValues('Please select at least one User for deletion.',values);" 
            onclick="btnDelete_Click" />              
        <asp:Button ID="btnPrintExport" runat="server" Text="<%$ Resources:LBShowcaseRes,btnPrintRep %>" CausesValidation="false"/>
        <asp:Button ID="btnSave" runat="server" OnClientClick="return ConfirmAddUser();"
            Text="<%$Resources:LBShowcaseRes,btnSave %>"  
            onclick="btnSave_Click" />
        </div>
        <div class="clear">
        </div>
    </div>
</div>

Gridview的宽度超出了边界,因为内容宽度更大了

设置gridview宽度为像素(固定)而不是百分比。如果你以百分比设置宽度,网格视图的宽度将随着"div或table或Page宽度"调整。

在你的代码中,你没有给你的gridview任何宽度。给出gridview的宽度也为100%,并根据您的调整将每个TemplateField的宽度从%'s更改为正常数字。

编辑:

然后增加网格视图的高度,这样数据将调整并适合表格。