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

【问题标题】：Aligning table elements in a responsive email在响应式电子邮件中对齐表格元素
【发布时间】：2013-03-15 00:57:36
【问题描述】：

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

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

我试过左右对齐，还有style="mso-table-lspace:0;mso-table-rspace:0;"，但还是不行。

【问题讨论】：

标签： email alignment responsive-design

【解决方案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>

【讨论】：