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

Question

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

a 中的两个表td都有一个像素宽度，但是这两个表中的其余表都有width=%.

我尝试了左右对齐，style="mso-table-lspace:0;mso-table-rspace:0;"但它仍然无法正常工作。

Answer 1

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

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