我怎样才能使这个电子邮件签名响应/移动友好？

Question

我有一个电子邮件签名，它由一个简单的表格（一行，两列）组成。第一列有一个标志，第二列有所有的联系方式。

我想让它具有响应性，以便在小型设备上显示徽标，并在下方显示联系方式（有效地将列变成行）。目前，在小型设备上，表格会被压缩，因此联系人详细信息不可读。

<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
  <div class="m_159975109461180827gmail_signature">
    <div dir="ltr">
      <div dir="ltr">
        <table style="color: #000000; font-family: 'Times New Roman'; font-size: medium; background: none; margin: 0px; padding: 0px; border: 0px initial initial;" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="font-family: arial, sans-serif; margin: 0px; border-top: 0px; border-right-width: 3px; border-right-color: #d2ac67; padding: 0px 7px 0px 0px; vertical-align: middle;" valign="top"><img class="CToWUd" src="http://mywebsite.com/logo-small.png" alt="" /></td>
              <td style="font-family: arial, sans-serif; margin: 0px; padding: 0px 0px 0px 12px;">
                <table style="background: none; margin: 0px; padding: 0px; height: 93px; border: 0px initial initial;" border="0" width="300" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; padding-bottom: 5px; color: #d2ac67; font-size: 14px;" colspan="2"><strong>My Name</strong></td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; color: #333333; font-size: 12px;" colspan="2"><span style="color: #d2ac67;">My position&nbsp;&bull;&nbsp;Name of the company</span></td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">p:</td>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top"><a style="color: #1155cc;" href="tel:+44%2020%207099%206646" target="_blank">+44 1234566</a>&nbsp;&nbsp;<span style="color: #d2ac67;">m:&nbsp;</span><a style="color: #1155cc;" href="tel:+44%207491%20044801" target="_blank">+44&nbsp;1</a>234567</td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">a:</td>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">some addresss</td>
                    </tr>
                    <tr>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">w:</td>
                      <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">link to the website</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

提前感谢大家的帮助/指导。

Answer 1

如果您想使用一个表格，请创建另一个表格，并将您的行作为列，并为每个表格分配一个类。使用 css 通过媒体调用隐藏和显示不同的表格。