Html 电子邮件响应表

正在尝试完成最后一项，即电子邮件页脚区域

一个表中有4个链接，它们在web视图中很好，位于水平线上

在移动版上，我尝试将它们分为两组。
意思是上面有两个链接，下面有两个链接

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

样式

<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>






一般信息123
T 000 000 000 000|
TEST@TESTING.COM









有什么建议吗
@media
目前是不可能的，因为它不能与内联CSS一起使用。
这是您需要启动的代码。您必须做一些准备工作，以使其不在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>


单列

左栏

右栏


祝你好运。
谢谢！这正是我想要的。