Html電子郵件 - 展望2010年 - 表對齊問題

Question

我有兩個表格左對齊，每個30％，以便當它響應100％的變化和堆疊在彼此之下。

問題是根據下面的截圖，第二個在頂部有差距，我不知道爲什麼？

我的代碼片段是在這裏

<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

Answer 1

看起來不像從截圖，背景色彩缺失相同的代碼和字體爲好。無論哪種方式，我認爲你需要對齊表之間的虛象列，試試下面的代碼：

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

如果需要你可以改變虛象列的寬度。讓我知道你怎麼去。