html - 如何根据主页设置自动表格宽度？

Question

我在 asp.net 上使用 consomcontrols.grid。我在页面上有一个宽度问题，特别是在 IE 上。我想根据主页自动设置gridview的宽度。

我的网格宽度可以大于页面宽度，我可以在页面 div 内使用滚动。

这是我的问题的截图:(IE 9)(页面缩放时所有浏览器都会出现问题)

我使用母版页:

<div style="width:90%">
     <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>

这是我的页面:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <table border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td><h2 style="padding-bottom:5px;">Stil Tanım Ekranı</h2></td>
      </tr>
        <tr>
          <td>

            <table border="0" cellpadding="2" cellspacing="1">
              <tr>
                 <td>
                     <div id="Div1" style="width:100%;overflow:auto;">
                         <table class="KolonClass" border="0" cellpadding="0" cellspacing="0" width="920px">
                    <tr>
                    <td>

 <cc1:xGrid ID="XGrid_StilKodlari" runat="server" 
             Width="100%"                                                                       
             AutoGenerateColumns="false"
             AllowPaging="false"
             AllowSorting="false"
             ShowHeaderWhenEmpty="true"
             GridLines="Both"
             BorderStyle="Solid"
             AscImage="~/Images/asc.png"
             DescImage="~/Images/desc.png"
             PagerSettings-Mode="NumericFirstLast"
             PagerSettings-PageButtonCount="5"                                                                                          
             EnableHeightResolver="false"                                                                           
             EnableRowClick="false"
             CssClass="Grdview"
             EmptyDataRowStyle-CssClass="Grdview_EmptyDataRowStyle"
             HeaderStyle-CssClass="Grdview_HeaderStyle"
             RowStyle-CssClass="Grdview_RowStyle"
             AlternatingRowStyle-CssClass="Grdview_AlternatingRowStyle"
             SelectedRowStyle-CssClass="Grdview_SelectedRowStyle"
             FooterStyle-CssClass="Grdview_FooterStyle"                                                                    
             OnRowDataBound="XGrid_StilKodlari_RowDataBound">
 <Columns>



    <asp:TemplateField HeaderText="Önizleme" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80px" >
     <ItemTemplate>
       <asp:Label CssClass="onizleme" runat="server" ID="lbl_onizleme" Text="F8 IMZA" Width="80px"/>
     </ItemTemplate>
                                                                        </asp:TemplateField>

   <asp:TemplateField  HeaderText="Stil Kodu" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="80px" >
   <ItemTemplate>

     <asp:TextBox CssClass="stilKodu IsRequired" runat="server" ID="txt_StilKodu" Width="80px"  Font-Size="11px"/>
  </ItemTemplate>

  </asp:TemplateField>

 <asp:TemplateField HeaderText="Açıklama" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="120px"  >
 <ItemTemplate>

    <asp:TextBox CssClass="aciklama IsRequired" runat="server" ID="txt_Aciklamasi" Width="120px"  Font-Size="11px"/>
    </ItemTemplate>
 </asp:TemplateField>

 <asp:TemplateField HeaderText="F.Büyüklüğü" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="70px"  >
    <ItemTemplate>

     <asp:TextBox CssClass="fontBuyuklugu IsNumber" runat="server" ID="txt_FontBuyuklugu" Width="50px" Font-Size="11px" />
   </ItemTemplate>

  </asp:TemplateField>

  <asp:TemplateField HeaderText="Kalın" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="90px" >
  <ItemTemplate>                                                                          
     <asp:CheckBox CssClass="kalin" ID="chk_Kalin" runat="server" Width="50px" />
  </ItemTemplate>

  </asp:TemplateField>

  <asp:TemplateField HeaderText="İtalik" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="90px" >
   <ItemTemplate>

     <asp:CheckBox CssClass="italik" ID="chk_Italik" runat="server" Width="50px" />
   </ItemTemplate>

   </asp:TemplateField>

  <asp:TemplateField HeaderText="Alt Çizgi" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="90px" >
   <ItemTemplate>

    <asp:CheckBox CssClass="altCizgi" ID="chk_AltCizgi" runat="server" Width="50px"/>
   </ItemTemplate>

   </asp:TemplateField>

  <asp:TemplateField HeaderText="FontRengi" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="40px" >
   <ItemTemplate>

    <asp:DropDownList CssClass="fontRengi" runat="server" ID="dp_FontRengi" Width="90px" Font-Size="11px" />                                                      
   </ItemTemplate>

   </asp:TemplateField>

   <asp:TemplateField HeaderText="Arka Plan Rengi" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="40px" >
    <ItemTemplate>

    <asp:DropDownList CssClass="arkaPlanRengi" runat="server" ID="dp_ArkaPlanRengi" Width="90px" Font-Size="11px" />                                                      
    </ItemTemplate>

    </asp:TemplateField>

    <asp:TemplateField HeaderText="Gelişmiş" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="100%" >
     <ItemTemplate>                                                                          
        <asp:TextBox CssClass="gelismis" runat="server" ID="txt_Gelismis" Width="395px"/>
     </ItemTemplate>

  </asp:TemplateField>

      </Columns>
     </cc1:xGrid>
    </td>
    </tr>
    </div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
   </table>
  </asp:Content>

Answer 1

问题出在容纳网格的 div 中。您设置的宽度为 1165 像素。你应该像这样切换到 width:100%;:

<div id="Div1" style="width:100%; overflow:auto;">

Live DEMO