电子邮件的响应表

Question

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

表中有4个链接，在网络视图中都可以，它们在水平线上。

在移动版上，我试图将它们分成2套。
含义2个链接位于顶部，2个链接位于其下方。

问题是这需要使用内联CSS来完成，而不必在其自己的单独部分中包含width * 4 * 2。

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> ，因为它不能与嵌入式CSS一起使用。

Answer 1

这是您需要启动的代码。您必须做一些工作才能使它不会堆积在Outlook桌面电子邮件客户端中。它适用于每个主要的电子邮件客户端，不需要@media标记。

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

左右各为300px宽。当电子邮件客户端的宽度小于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>

祝你好运。