电子邮件的响应表

Question

尝试完成最后一部分，即电子邮件页脚区域。

一个表格有4个链接，在web-view中很好，它们在水平线上。

在移动版本上，我尝试将它们分成 2 个一组。
表示顶部有 2 个链接，下方有 2 个链接。

问题是这需要使用内联 CSS 来完成，而在它自己的单独部分中没有 style。

<table border="0" cellpadding="0" cellspacing="0" id="Table5" width="100%">
  <tr style="font-size: 11px; background-color: black;">
   <td align="center">
    <br>
    <br>
    <span style="color:#7A7A7A; line-height: 1.3; "><font face="Arial" size="1" ><b>GENERIC INFORMATION 123
      <div style="line-height:1.3;">T 000 000 000 |
      TEST@TESTING.COM<br></div></b></font></span><br>
    <br>
     <span style="color: rgb(221, 221, 221);"><font face="Arial" size="1"><b><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">BOOK APPOINTMENT</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">PRIVACY</span></a><a alias="" conversion="false" data-linkto="http://"google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">UNSUBSCRIBE</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">CONTACT US</span></a></b></font></span><br>
    <br>
    </td></tr></table>

有什么建议吗？ @media 目前是不可能的，因为它不能与内联 CSS 一起使用。

Answer 1

这是您需要启动的代码。您必须采取一些措施才能使其不会在 Outlook 桌面电子邮件客户端中叠加。它适用于所有主要的电子邮件客户端，不需要@media 标签。

第一个表格总是跨越电子邮件正文的宽度。

左右各 300 像素宽。当电子邮件客户端宽度小于 300px 时，它们会堆叠。

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="">
  <tr>
    <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: center;">
      <p style="margin: 0;">Single Column</p>
    </td>
  </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
  <tr>
    <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
      <p style="margin: 0;">Left Column</p>
    </td>
  </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
  <tr>
    <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
      <p style="margin: 0;">Right Column</p>
    </td>
  </tr>
</table>

祝你好运。