图像重叠背景的HTML表

Question

我正在为我正在编码的HTML电子邮件创建一个CTA按钮，该按钮的图像与它重叠。

我有一个构建它的行动计划，但它似乎不适用于浏览器和电子邮件客户端。它在Google Chrome中看起来很棒，但在许多其他浏览器和客户端(例如Codepen(中开始出现问题

我把我的代码，一个我试图创建的屏幕截图，以及一个线框放在这个代码笔中供参考。我哪里错了？

enter code here这是我的电笔。

提前感谢大家！

Answer 1

像这样应该可以工作：

<table cellspacing="0" cellpadding="0">
  <tr>
    <td width="118" style="width: 118px;">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="118" height="9" style="font-size: 9px; line-height: 9px; height: 9.5px;"></td>
        </tr>
        <tr>
          <td bgcolor="#0069aa" height="48" style="color: #ffffff;font-style: italic;font-weight: bold;text-align: center;font-size: 10px !important;background-color: #0069aa;line-height: 16px !important; font-size: 15.5px !important;">
            Download
            <br />FREE e-book</td>
        </tr>
      </table>
    </td>
    <td width="54" height="57" bgcolor="#0069aa" style="width: 54px; background-color:#0069aa; vertical-align:top;">
      <img width="54" src="http://www.camping-trafoi.com/pricelist/dog.gif" alt="" style="display:block;margin:0;padding:0;">
    </td>
    <td width="8" height="57.5" style="height: 57.5px;width: 8px;">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td height="9.5" style="height: 9.5px; font-size: 9.5px; line-height: 9.5px;"></td>
        </tr>
        <tr>
          <td height="48" bgcolor="#0069aa" style="height: 48px; background-color: #0069aa;font-size: 48px; line-height: 48px;">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>