2014-07-03 3 views
0

enter image description hererowspan et alignement question

Salut, Ci-joint l'image de la fenêtre où j'utilise dans rowspan pour l'alignement. Je n'obtiens toujours pas le bon alignement.

Voici les balises Css et MArkup. Toutes les zones de texte doivent être alignées avec un espace uniforme entre elles.

<div id="divDownload" runat="server" visible="true"> 
     <dx:aspxpopupcontrol id="pcDownload" runat="server" showpagescrollbarwhenmodal="true" 
      clientinstancename="pcDownload" enableclientsideapi="true" modal="True" popuphorizontalalign="WindowCenter" 
      popupverticalalign="WindowCenter" showheader="false" allowdragging="True" enableanimation="False" 
      width="600px" autoupdateposition="true" closeaction="CloseButton" visible="true" OnClientClick=""> 
         <ContentCollection> 
          <dx:PopupControlContentControl ID="PopupControlContentControl4" runat="server" 
           Width="100%"> 
           <dx:ASPxPanel ID="ASPxPanel3" runat="server"> 
            <PanelCollection> 
             <dx:PanelContent ID="PanelContent4" runat="server"> 
              <div> 
               <table class="cChildTable"> 
                <tr> 
                 <td> 
                  <h3>Download</h3> 
                 </td> 
                </tr> 
                <tr> 
                 <td class="auto-style1"> 
                  <div class="hr"> 
                  </div> 
                  <asp:Label ID="lblDownLoadMessages" runat="server" CssClass="cMessageArea"></asp:Label> 
                 </td> 
                </tr> 
               </table> 
               <table class="cChildTable" border="0"> 
                <tr><td style="font:bold" colspan="2"><asp:Label ID="Title" runat="server" Text="Content Link Title"></asp:Label></td></tr> 
                <tr> 
                 <td style="vertical-align: top;" rowspan="8"> 
                  <asp:CheckBox ID="chkImg" runat="server" AutoPostBack="True" Checked="true"/> 
                 </td> 
                 <td rowspan="3" Style="vertical-align:top"> 
                  <asp:Image runat="server" ID="imgUpload" Width="80px" Height="80px" Style="top: 0px;" AlternateText="No Image" />      
                 </td> 
                 <td style="vertical-align: top;"> 
                  <asp:CheckBox ID="chkName" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td style="vertical-align: top;width:10%"> 
                  <asp:Label ID="lblName" runat="server" Text="Name:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td style="vertical-align: top;"> 
                  <asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td>      
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkCompany" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblCompany" runat="server" Text="Company:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtCompany" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkAddress" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td > 
                  <asp:Label ID="lblAddress" runat="server" Text="Address:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtAddress" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr>             
                <tr> 
                 <td rowspan="5" style="vertical-align:top; text-align:center; padding-top:0.25em"><asp:LinkButton ID="lnkAddImg" runat="server" Text="Add" target="_blank"> </asp:LinkButton></td>    
                 <td> 
                  <asp:CheckBox ID="chkCtyStateZip" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td style="width:auto"> 
                  <asp:Label ID="lblCtyStateZip" runat="server" Text="City, State Zip:" Width="77px" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtCtyStateZip" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkPhone" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblPhone" runat="server" Text="Phone:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtPhone" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkFax" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblFax" runat="server" Text="Fax:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtFax" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkEmail" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td> 
                 <td> 
                  <asp:Label ID="lblEmail" runat="server" Text="Email:" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtEmail" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td> 
                  <asp:CheckBox ID="chkOther" runat="server" Checked="true" 
                   AutoPostBack="true" /> 
                 </td>              
                 <td> 
                  <asp:Label ID="lblOther" runat="server" Text="Other:" Width="90px" CssClass="cLabelText"></asp:Label> 
                 </td> 
                 <td> 
                  <asp:TextBox ID="txtOther" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                 </td> 
                </tr> 
                <tr> 
                 <td colspan="5"> 
                  <div class="buttons"> 
                   <span id="span2" class="cBtnLeft"><span class="cBtnMid"><span class="cBtnRight"> 
                    <asp:Button ID="btnDownLoad" runat="server" Width="65px" CssClass="cBtnRight" Text="Download" 
                     OnClick="btnDownLoad_Click"/> 
                   </span></span></span><span id="span1" class="cBtnLeft"><span class="cBtnMid"><span 
                    class="cBtnRight"> 
                    <asp:Button ID="btnCancel" runat="server" Width="65px" CssClass="cBtnRight" Text="Cancel" 
                     Visible="true" OnClick="btnCancel_Click" /> 
                   </span></span></span> 
                  </div> 
                 </td> 
                </tr> 
               </table> 
              </div> 
              </dx:PanelContent> 
             </PanelCollection> 
            </dx:ASPxPanel> 
           </dx:PopupControlContentControl> 
           </ContentCollection> 
      </dx:aspxpopupcontrol>  
    </div> 



CSSClass for .clabeltext 
    .cLabelText { 
    border-right:none; 
    height:19px; 
    font-family: Arial; 
    font-size:9pt; 
    text-align: left !important; 
    color:#464646; 
    font-weight:normal; 
    width:2px; 
} 
.cTextSearch{ /* Using TextBox Style Old Name RDFormText*/ 
    clear:both; 
    padding:0px 2px 0px 2px; 
    height:19px; 
    border:1px solid #cdc9c9; 
    font-family:Arial; 
    font-size:12px; 
    color: #464646; /* previous light color color:#959595; */ 
    text-align:left; 
    resize: none; 
} 
+0

que voulez-vous dire par «espace uniforme»? – Era

+0

La hauteur entre les champs Nom et société est plus par rapport aux champs de Fax et de Téléphone – user2109946

Répondre

0
            <td style="vertical-align: top;"> 
                 <asp:CheckBox ID="chkName" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td style="vertical-align: top;width:10%"> 
                 <asp:Label ID="lblName" runat="server" Text="Name:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td style="vertical-align: top;"> 
                 <asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 

Retirer style="vertical-align: top;" de ce code

parce qu'il est seulement aligné la case à cocher, zone de texte du nom en haut de la ligne .. la valeur par défaut est l'alignement est moyenne, de sorte que vous supprimez juste le style vertical-align:top pour ces éléments ... C'est tout

0

supprimer le lien avec rowspan=5Add et l'ajouter sous l'image du logo et de garder la rowspan=8 pour la cellule logo. Mettez à jour votre tableau comme ci-dessous.

<table class="cChildTable" border="0"> 
               <tr><td style="font:bold" colspan="2"><asp:Label ID="Title" runat="server" Text="Content Link Title"></asp:Label></td></tr> 
               <tr> 
                <td style="vertical-align: top;" rowspan="8"> 
                 <asp:CheckBox ID="chkImg" runat="server" AutoPostBack="True" Checked="true"/> 
                </td> 
                <td rowspan="8" Style="vertical-align:top"> 
                 <asp:Image runat="server" ID="imgUpload" Width="80px" Height="80px" Style="top: 0px;" AlternateText="No Image" /> 
<div style="text-align:center; padding-top:0.25em"><asp:LinkButton ID="lnkAddImg" runat="server" Text="Add" target="_blank"> </asp:LinkButton></div>      
                </td> 
                <td style="vertical-align: top;"> 
                 <asp:CheckBox ID="chkName" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td style="vertical-align: top;width:10%"> 
                 <asp:Label ID="lblName" runat="server" Text="Name:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td style="vertical-align: top;"> 
                 <asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td>      
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkCompany" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblCompany" runat="server" Text="Company:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtCompany" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkAddress" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td > 
                 <asp:Label ID="lblAddress" runat="server" Text="Address:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtAddress" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr>             
               <tr> 

                <td> 
                 <asp:CheckBox ID="chkCtyStateZip" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td style="width:auto"> 
                 <asp:Label ID="lblCtyStateZip" runat="server" Text="City, State Zip:" Width="77px" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtCtyStateZip" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkPhone" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblPhone" runat="server" Text="Phone:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtPhone" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkFax" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblFax" runat="server" Text="Fax:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtFax" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkEmail" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td> 
                <td> 
                 <asp:Label ID="lblEmail" runat="server" Text="Email:" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtEmail" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td> 
                 <asp:CheckBox ID="chkOther" runat="server" Checked="true" 
                  AutoPostBack="true" /> 
                </td>              
                <td> 
                 <asp:Label ID="lblOther" runat="server" Text="Other:" Width="90px" CssClass="cLabelText"></asp:Label> 
                </td> 
                <td> 
                 <asp:TextBox ID="txtOther" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox> 
                </td> 
               </tr> 
               <tr> 
                <td colspan="5"> 
                 <div class="buttons"> 
                  <span id="span2" class="cBtnLeft"><span class="cBtnMid"><span class="cBtnRight"> 
                   <asp:Button ID="btnDownLoad" runat="server" Width="65px" CssClass="cBtnRight" Text="Download" 
                    OnClick="btnDownLoad_Click"/> 
                  </span></span></span><span id="span1" class="cBtnLeft"><span class="cBtnMid"><span 
                   class="cBtnRight"> 
                   <asp:Button ID="btnCancel" runat="server" Width="65px" CssClass="cBtnRight" Text="Cancel" 
                    Visible="true" OnClick="btnCancel_Click" /> 
                  </span></span></span> 
                 </div> 
                </td> 
               </tr> 
              </table> 
+0

Merci Suresh, sauf ne pas pouvoir définir la largeur td pour les étiquettes – user2109946

+0

pourquoi? vous pouvez attribuer la largeur facilement. Essayez d'attribuer une largeur en pixels ou d'assigner une largeur en pourcentage pour toutes les cellules. –