Отзывчивый стол для электронной почты

Question

Пытаясь завершить последний фрагмент, который является областью нижнего колонтитула электронной почты.

В таблице 4 ссылки, которые в веб-представлении хороши, они расположены в горизонтальной линии.

В мобильной версии я пытаюсь иметь их в наборах 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 пикселей. Когда размер почтового клиента меньше 300 пикселей, он будет складываться.

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

Удачи.