2017-03-10 1 views
0

J'ai deux tables alignées à 30% chacune de sorte que quand il va répondre le changement à 100% et la pile sous l'autre.Courriels Html - Outlook 2010 - Tableau Aligner Problème

Le problème est selon la capture d'écran ci-dessous le deuxième a un écart au sommet et je ne sais pas pourquoi?

Mon bout de code est ici

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;"> 
     <!-- CONTENT TABLE // --> 
     <table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth"> 
       <tr> 
        <td valign="top" class="topTen">                          <p><span>1</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>2</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>3</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>4</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>5</span> FIRST AND LAST NAME</p> 
                      <hr> 
                     </td> 
                    </tr> 
                   </table> 
                   <!-- // CONTENT TABLE --> 
                   <!-- CONTENT TABLE // --> 
                   <table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth"> 
                    <tr> 
                     <td valign="top" class="topTen"> 
                      <p><span>6</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>7</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>8</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>9</span> FIRST AND LAST NAME</p> 
                      <hr> 
                      <p><span>10</span> FIRST AND LAST NAME</p> 
                      <hr> 
                     </td> 
                    </tr> 
                   </table> 
                   <!-- // CONTENT TABLE --> 
                  </td> 
                 </tr> 
                </table> 

Outlook 2010 - Screenshot

Répondre

0

Ne ressemble pas le même code des captures d'écran, les couleurs de fond sont portés disparus et polices ainsi. De toute façon, je pense que vous avez besoin d'une colonne fantôme entre les tables pour aligner, essayez le code ci-dessous:

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 
    <tr> 
 
     <td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;"> 
 
     <!-- CONTENT TABLE // --> 
 
     <table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth"> 
 
       <tr> 
 
<td valign="top" class="topTen">                           \t <p><span>6</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>7</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>8</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>9</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>10</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
\t <!--[if (gte mso 9)|(IE)]> 
 
</td><td align="left" valign="top" width="50%"> 
 
<![endif]--> 
 

 
\t <!-- CONTENT TABLE // --> 
 
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth"> 
 
\t \t <tr> 
 
\t \t \t <td valign="top" class="topTen"> 
 
\t \t \t \t <p><span>6</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>7</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>8</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>9</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t \t <p><span>10</span> FIRST AND LAST NAME</p> 
 
\t \t \t \t <hr> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
\t <!-- // CONTENT TABLE --> 
 
</td> 
 
</tr> 
 
</table>

Vous pouvez modifier la largeur de la colonne fantôme si vous avez besoin. laissez-moi savoir comment vous allez.