Html电子邮件 - 展望2010年 - 表对齐问题

问题描述：

我有两个表格左对齐，每个30％，以便当它响应100％的变化和堆叠在彼此之下。Html电子邮件 - 展望2010年 - 表对齐问题

问题是根据下面的截图，第二个在顶部有差距，我不知道为什么？

我的代码片段是在这里

<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

答

看起来不像从截图，背景色彩缺失相同的代码和字体为好。无论哪种方式，我认为你需要对齐表之间的虚象列，试试下面的代码：

<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>

如果需要你可以改变虚象列的宽度。让我知道你怎么去。

Html电子邮件 - 展望2010年 - 表对齐问题

相关推荐