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隐藏并使用媒体调用显示不同的表。

如何使此电子邮件签名响应/移动友好？

1 个答案: