MailChimp 中的表格不会覆盖在背景上

Question

我在我正在创建的 MailChimp 模板中插入了一个代码块。我需要将下面的表格或文本放在该图像上。我不是编程专家，我要求 ChatGPT 对此进行编码，并且在 MailChimp 预览中一切正常。然而，当我发送测试电子邮件时，它就变成了这样。该表出现在图像下方。

这是我的代码：

（抱歉有点乱）

<style>
    body {
        margin: 0;
        padding: 0;
      display: flex;
    }

    .container {
        position: relative;
    }

    .background-image {
        display: block;
        width: 100%;
        margin-left:2px;
    }

    .overlay-table {
        position: absolute;
        top: 0;
        width: 80%;
        margin-top:85px;
        margin-left:68px;
        table-layout:fixed;

    }

    .overlay-table table {
        width: 530px;
        margin:0px  auto;
        border-collapse: collapse;
                table-layout:fixed;
    }

    .overlay-table td {
        padding: 5px;
        text-align: center;
        margin-right:30px;
       width:10%;
        font-size: 12px;
        
    }
  
   .overlay-table tr {
        padding: 0px;
            margin: 0px;
        text-align: center;
 
            
    }
  .white{
        color:#ffffff
    }
  
 
</style>


<!-- Email content -->
<div class="container">
    <img src="https://mcusercontent.com/fbb859e41b9c38d9b0605cda2/images/8db04116-c7dc-33e9-5479-53885ba2d8c6.png" alt="Image Description" class="background-image">

    <div>
      
  </div>
  
  <div class="overlay-table">
        <table cellspacing="0" cellpadding="0" border="0">
            <!-- Row 1 -->
            <tbody><tr>
                <td><b>PM-7</b><br> PRIMO <br>7 Quater Mixer <br><br><b>AX-IB550</b><br> AXIS <br>Hand Held Mixer <br><br><b>IGF-35/40 NG</b><br> ΙΚΟΝ <br>Fryer 35/40 lbs <br><br><b>AX-VIB750</b><br> AXIS<br> Hand Held Mixer</td>
              <td><b>PS-12</b><br> PRIMO <br>12" Meat Slicer <br><br><b>PM-10</b><br> PRIMO<br> 10 QT Gear Mixer <br><br><b>SRSP-18-2</b><br>SIERRA<br>Gas Stock Pot 18" <br><br><b>AX-VIB750</b><br>AXIS Hand Held Mixer</td>
                <td>AXS10U AXIS Ultra 10" Slicer <br><br>AXS12U AXIS Ultra 12" Slicer<br><br></td>
                <td class="white">AX-VIB750 AXIS Hand Held Mixer</td>
              <td class="white"><b>AX-S14GIX</b><br>AXIS <br>Slicer 14"<br><br><b>LX-46RB</b><br> KOOL-IT SIGNATURE<br> Dbl Glass Door <br>Refrigerator <br>24 Cu Ft Blk<br><br><b>KBSR-2G </b><br>KOOL-IT SIGNATURE <br>Upright Bottom<br> Mount Refrigerator <br>With Glass Door <br><br><b>KGL-KRYSTAL</b><br>HYDRA-KOOL<br> Spot Merchandiser Blk</td>
            </tr>
           
            
        </tbody></table>
    </div>
</div>

Answer 1

我也有同样的问题，经过一些研究，我发现电子邮件客户端不支持任何现代 CSS 技术。我发现一个旧线程推荐使用像 MJM 这样的电子邮件模板客户端，仍在尝试弄清楚， “您可以要求 GPT 按照 MJM 指南为您构建一个模板，因为它是在 2021 年之前” 这也是原始线程的链接。