對齊響應電子郵件中的表格元素

Question

我在設計一個響應電子郵件，並且我在一個<td>中有兩個表格。第二個表是不是在Outlook 2007和2010頂部對齊：

一個td內兩個表都有一個像素寬度，但該表的其餘內這兩個表有width=%。

我試着對齊左右，以及style="mso-table-lspace:0;mso-table-rspace:0;"，但它仍然無法正常工作。

Answer 1

我遇到了同樣的問題。我懷疑這是由於Outlook使用Word來呈現HTML和Word正在變得困惑和barfing一個分頁符。

我建議將每個表格放在父表格的單元格內。然後將您的樣式應用到父表格的單元格。請注意，「浮動」通常在HTML中用於電子郵件是不好的，但由於它在媒體查詢中意味着使用起來很安全。

CSS：

@media only screen and (max-width: 500px) { 
    .floatLeftResponse{ 
    width:100% !important; 
    float:left; 
    } 
} 

HTML：

<table width="800" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF"> 
    <tr> 
    <td width="50%" valign="top" class="floatLeftResponse"> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> 
     <tr> 
      <td> <!---bla bla bla this is your left column content--> 
      </td> 
     </tr> 
     </table> 
    </td> 
    <td width="50%" valign="top" class="floatLeftResponse"> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> 
     <tr> 
      <td> <!---bla bla bla this is your right column content--> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>