Как исправить пробел в двух HTML-таблицах в Outlook - PullRequest
Новая
       23

Как исправить пробел в двух HTML-таблицах в Outlook

0 голосов
/ 01 февраля 2019

enter image description here

<html>
<head>
<title>Prueba</title>
	
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
	
</head>
	
	
	
<body>
<div align="center">
	
	
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="40" align="center"><span style="color:#999;	font-size:11px;	font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"></span></td>
    </tr>
  </table>
	
	
  <table width="650" border="0" align="center" cellpadding="25" cellspacing="0" style="border:1px solid #CCC;">
    <tr>
      <td>
		  <table border="0" cellspacing="0" cellpadding="0" width="600">
          <tr>
            <td align="center" height="70">
              <table width="600" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><span style="color:#232272; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">{ESTIMADO_A} {NOMBRE}</span></td>
                 
                </tr>
              </table>
			  
			  </td>
          </tr>
			  
			  
<!-- HEADER -->				  
          <tr>
            <td valign="top" width="600"  align="center" ><img src="img/image1.png" alt="Image1" width="600" height="516" /></td>
          </tr>
			  
<!-- TXT  -->				  
          <tr>
            <td valign="" width="600" height="0" align="center">
                <table width="600" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="10" valign="middle" style="">
                            <p style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#555555; text-align:center; margin-top:0px;">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae. Quia odit facilis dignissimos voluptas ipsa itaque ex, quod quis impedit blanditiis dicta quaerat, illo voluptates fugit maxime sapiente vel.</p>
                        </td><br>
                    </tr>
              </table>
            </td>
          </tr>
             <tr>
                <td>&nbsp;</td>
            </tr>
          

        <!-- CONTENIDOS -->		   
               <tr>
                <td>
                    
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="15%"  align="center">
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-left: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                 </table>
                            </td>
                            <td  align="center" valign="right" >
                                  <span style="color:#232272; font-size:16px; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong> Title 1</strong> </span>
                            </td>
                            <td width="15%"  align="center" >
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-right: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                 </table>
                            </td>
                        </tr>
                    </table> 

                </td>
            </tr>
            <tr>
                <td>
                    
                        <table width="100%" cellspacing="0" cellpadding="0" style="border-left: 2px solid #6A2E92; border-right: 2px solid #6A2E92; border-bottom: 2px solid #6A2E92;">
                                <tr>
                                     <td height="20" colspan="10" align="center" valign="top" bgcolor="#FFF" >&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 1</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Ingrese a <strong> ejemplo.cl</strong><br> con su rut y clave de acceso. </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong>2</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Diríjase al menú superior, opción <strong><br>Tarjeta de crédito o Cuenta corriente. </strong> </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 3</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Luego seleccione la opción: <strong>Encender <br> y apagar tarjetas</strong> y/o <strong>administrar zona geográfica. </strong></span><br><br>
                                    </td>
                                </tr>
                            </table>

                </td>
            </tr>
          
             

      </table>
		  </td>
     </tr>
  </table>
	
<!-- /END BODY -->	
	
	
	
	
<!-- LEGAL -->		
	
  <table cellpadding="0" cellspacing="0" border="0" width="650">
    <tr><br>
		 <img src="images/image2.jpg" alt="image2" width="650" height="125" title="o"/>
		
      <td><table width="650" cellpadding="0" border="0" cellspacing="0">
          <tr>
            <td>
        
             <br/>
              
              <img src="images/image3.jpg" alt="image3" width="650" height="49"><br/>
              <br/></td>
          </tr>
        </table>
        <table width="650" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="500" ><p style="width:650px;"> <span style="text-align:left;display:block;color: #999999; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"> Este correo electr&oacute;nico ha sido enviado a <br>
                Inf&oacute;rmese sobre la garant&iacute;a estatal de los dep&oacute;sitos en su banco<br>
                Nuestros e-mails no contienen enlaces<br>
                Para anular su suscripci&oacute;n, haga click aqu&iacute;:<br>
                Si considera que este mail contiene material abusivo, haga click ac&aacute;:<br>
                </span> </p></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
</body>
</html>

У меня проблема с HTML-кодом, который я создаю.

Когда я вижу свой код в браузере, добавленные мной границы отображаются непрерывно, но когда я вижу это письмо в Outlook, я вижу пробел в таблицах, как показано на скриншоте, который я прикрепил.

Кто-нибудь знает, как я могу это исправить?

PS: Я создаюдве таблицы, в первой вы найдете диапазон "title1", а во второй таблице вы найдете несколько диапазонов, которые создают список номеров.

Обе таблицы имеют границы.

Вв случае таблицы 1 граница, достигающая заголовка 1 по середине и таблице 2, имеет правую, левую и нижнюю границу.

Проблема возникает, когда линия границы соединяет таблицу 1 и таблицу 2.

Спасибо!береги себя!

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019 

<html>
<head>
<title>Prueba</title>
    
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    
</head>
    
    
    
<body>
<div align="center">
    
    
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="40" align="center"><span style="color:#999;   font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"></span></td>
    </tr>
  </table>
    
    
  <table width="650" border="0" align="center" cellpadding="25" cellspacing="0" style="border:1px solid #CCC;">
    <tr>
      <td>
          <table border="0" cellspacing="0" cellpadding="0" width="600">
          <tr>
            <td align="center" height="70">
              <table width="600" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><span style="color:#232272; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">{ESTIMADO_A} {NOMBRE}</span></td>
                 
                </tr>
              </table>
              
              </td>
          </tr>
              
              
<!-- HEADER -->               
          <tr>
            <td valign="top" width="600"  align="center" ><img src="img/image1.png" alt="Image1" width="600" height="516" /></td>
          </tr>
              
<!-- TXT  -->                 
          <tr>
            <td valign="" width="600" height="0" align="center">
                <table width="600" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="10" valign="middle" style="">
                            <p style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#555555; text-align:center; margin-top:0px;">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae. Quia odit facilis dignissimos voluptas ipsa itaque ex, quod quis impedit blanditiis dicta quaerat, illo voluptates fugit maxime sapiente vel.</p>
                        </td><br>
                    </tr>
              </table>
            </td>
          </tr>
             <tr>
                <td>&nbsp;</td>
            </tr>
          

        <!-- CONTENIDOS -->        
               <tr>
                <td>
                    
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="15%"  align="center">
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-left: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                        <tr>
                                             <td style="border-left: solid #6A2E92 2px;">
                                                    &nbsp;
                                             </td>
                                        </tr>
                                 </table>
                            </td>
                            <td  align="center" valign="right" >
                                  <span style="color:#232272; font-size:16px; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong> Title 1</strong> </span>
                            </td>
                            <td width="15%"  align="center" >
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-right: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                      <tr>
                                         <td style="border-right: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                 </table>
                            </td>
                        </tr>
                    </table> 

                </td>
            </tr>
            <tr>
                <td>
                    
                        <table width="100%" cellspacing="0" cellpadding="0" style="border-left: 2px solid #6A2E92; border-right: 2px solid #6A2E92; border-bottom: 2px solid #6A2E92;">
                                <tr>
                                     <td height="20" colspan="10" align="center" valign="top" bgcolor="#FFF" >&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 1</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Ingrese a <strong> ejemplo.cl</strong><br> con su rut y clave de acceso. </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong>2</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Diríjase al menú superior, opción <strong><br>Tarjeta de crédito o Cuenta corriente. </strong> </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 3</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Luego seleccione la opción: <strong>Encender <br> y apagar tarjetas</strong> y/o <strong>administrar zona geográfica. </strong></span><br><br>
                                    </td>
                                </tr>
                            </table>

                </td>
            </tr>
          
             

      </table>
          </td>
     </tr>
  </table>
    
<!-- /END BODY -->  
    
    
    
    
<!-- LEGAL -->      
    
  <table cellpadding="0" cellspacing="0" border="0" width="650">
    <tr><br>
         <img src="images/image2.jpg" alt="image2" width="650" height="125" title="o"/>
        
      <td><table width="650" cellpadding="0" border="0" cellspacing="0">
          <tr>
            <td>
        
             <br/>
              
              <img src="images/image3.jpg" alt="image3" width="650" height="49"><br/>
              <br/></td>
          </tr>
        </table>
        <table width="650" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="500" ><p style="width:650px;"> <span style="text-align:left;display:block;color: #999999; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"> Este correo electr&oacute;nico ha sido enviado a <br>
                Inf&oacute;rmese sobre la garant&iacute;a estatal de los dep&oacute;sitos en su banco<br>
                Nuestros e-mails no contienen enlaces<br>
                Para anular su suscripci&oacute;n, haga click aqu&iacute;:<br>
                Si considera que este mail contiene material abusivo, haga click ac&aacute;:<br>
                </span> </p></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
</body>
</html>

Я нашел проблему!Оказывается, что «title1» использовал больше места в «tr», в котором он содержался.Это означает, что если я напишу больший заголовок, таблица будет деформирована.

Я исправлю это, добавив новый пробел над "title1"

Спасибо всем, кто взялвремя написать комментарий и попытаться помочь мне!:)

Большое спасибо!

PS: я прилагаю код с ответом

0 голосов
/ 02 февраля 2019

Возможное решение: используйте одну таблицу вместо двух.

...