How to set auto table width according to main page?

Question

I use consomcontrols.grid on asp.net.I have a width problem specially on IE on page. I want to set gridview's width auto according to main page.

My grid's width can be bigger than page width,i can be able to use scroll inside page div.

This is my problem's screenshot: (IE 9) (Problem lives all browser when page zoom)

I use masterpage :

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

This is my page:

<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

The problem consists in the div that houses your grid. You have a set width of 1165px. You should switch to width:100%; like this:

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

Live DEMO