Question

我正在尝试开发一个带有评级图片的电子邮件模板。我正在使用表格布局，以便它在Outlook中工作。

我使用了表格布局。但是第一个td标签使用的宽度比其他td更宽。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

  <head>
    <meta name="viewport" content="width=device-width;initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>

  <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="padding:10px;color:#616161;font-size:13pt;font-family: Arial, Helvetica, sans-serif;">
    <table cellpadding="0" cellspacing="0" border="0" valign="top" style="width:100%;background-color:#f7f7f7;border:1px solid #e7e7e7;border-radius:5px;">
      <tr>
        <td style="padding:15px 10px;">Hi {{ticket.requester.first_name}},</td>
      </tr>
      <tr>
        <td style="padding:15px 10px;">Your support ticket, <b>'{{ticket.id}}:{{ticket.title}}'</b>, was recently marked as resolved and we'd love to hear how you would rate your experience.</td>
      </tr>
      <tr>
        <td style="padding:15px 10px;">Your feedback plays a key role in helping us understand what we're doing well and where improvements can be made. Help us to better help you by answering the following question:</td>
      </tr>
      <tr>
        <td style="padding:30px 15px;">How would you rate the support you received?</br>Use the scale below to indicate how satisfied you were with your overall experience,</td>
      </tr>
      <tr style="">
        <td align="center" style="">
          <a href="https://www.onepointsurveys.com/x/?sid=8ompJlgDM9C7l7cuONjG&user1=1" target="_blank" class="link_visit" onMouseOver=" this.style.color='#616161'" onmouseout="this.style.color='#fff'"><img width="40" src="http://www.onepointglobal.com/Images/Outstanding.png" alt="1" /></a>
          <div style="font-weight:normal;font-size: 11px;margin: 10px 0;">Outstanding</div>
        </td>
        <td align="center">
          <a href="https://www.onepointsurveys.com/x/?sid=8ompJlgDM9C7l7cuONjG&user1=1" target="_blank" onMouseOver="this.style.color='#616161'" onmouseout="this.style.color='#fff'"><img width="40" src="http://www.onepointglobal.com/Images/Good,I'm%20satisfied.png" alt="2" /></a>
          <div style="font-weight:normal;font-size: 11px;margin: 10px 0;">Satisfied</div>
        </td>
        <td align="center" style="">
          <a href="https://www.onepointsurveys.com/x/?sid=8ompJlgDM9C7l7cuONjG&user1=1" target="_blank" style="color:#fff;padding:2px;text-decoration:none;font-size:22px;" onMouseOver=" this.style.color='#616161'" onmouseout="this.style.color='#fff'"><img width="40" src="http://www.onepointglobal.com/Images/Could%20be%20better.png" alt="3" /></a>
          <div style="font-weight:normal;font-size: 11px;margin: 10px 0;text-align:center;">Better</div>
        </td>
        <td align="center" style="">
          <a href="https://www.onepointsurveys.com/x/?sid=8ompJlgDM9C7l7cuONjG&user1=1" target="_blank" onMouseOver=" this.style.color='#616161'" onmouseout="this.style.color='#fff'"><img width="40px" src="http://www.onepointglobal.com/Images/Bad,I'm%20unsatisfied.png" alt="4" /></a>
          <div style="font-weight:normal;font-size: 11px;margin: 10px 0;">Unsatisfied</div>
        </td>
      </tr>
      <tr>
        <td style="padding:30px 15px;">We've included a reminder of what your ticket was about.</td>
      </tr>
      <tr>
        <td style="padding:0 25px;">
          <hr style="border-top:1px solid #e7e7e7;">
        </td>
      </tr>
      <tr>
        <td style="padding:25px;"><img src="http://www.onepointglobal.com/Images/logo-footer.png" alt="onepoint_logo"></td>
      </tr>
    </table>
  </body>

</html>

附加相同的html。任何人都可以让我知道为什么表格列表在代码中没有正常工作。

非常感谢。

电子邮件模板开发移动版本

0 个答案: