在响应式电子邮件中对齐表格元素

Question

我正在设计响应式电子邮件，我在一个<td>中有两个表。第二个表在Outlook 2007和2010中没有顶部对齐：

td内的两个表都有像素宽度，但这两个表中的其余表格都有width=%。

我尝试左右对齐，以及style="mso-table-lspace:0;mso-table-rspace:0;"，但它仍无效。

Answer 1

我遇到了同样的问题。我怀疑这是由于Outlook使用Word来呈现HTML和Word变得混乱并且打破了分页符。

我建议将每个表放在父表的单元格中。然后将您的样式应用于父表的单元格。请注意，“浮动”通常不适合在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>