Question

我使用this responsive email template设计了一个表格式报告电子邮件模板，但不幸的是它在Outlook桌面2016上呈现出可怕的效果。

我会感谢任何形式的帮助，使我的模板在Outlook桌面上看起来更好以下是模板表格区域的代码段：

<tr>
  <td align="center" valign="top">
    <!-- CENTERING TABLE // -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td align="center" valign="top">
          <!-- FLEXIBLE CONTAINER // -->
          <table border="0" cellpadding="5" cellspacing="0" width="600" class="flexibleContainer">
            <tr>
              <td align="center" valign="top" width="600" class="flexibleContainerCell" style="background-color:#dd4f05;">
                <!-- CONTENT TABLE // -->
                <table border="0" cellpadding="10" cellspacing="0" width="100%" style='table-layout:fixed'>
                  <thead style="color: #ffffff; line-height: 200%; font-family:Tahoma,Verdana,Segoe,sans-serif; font-size: 15px; margin-top: 3px; margin-bottom: 3px; text-align: right; font-weight: bold">
                    <col width=6 />
                    <col width=10 />
                    <col width=6 />
                    <tr>
                      <th align="left">Category</th>
                      <th>Novemeber Spend</th>
                      <th align="left">Vs October </th>
                    </tr>
                  </thead>
                  <tbody style="color: #ffffff; line-height: 200%; font-family: Tahoma,Verdana,Segoe,sans-serif; font-weight: normal; margin-top: 3px; margin-bottom: 3px; text-align: left;">
                    <tr>
                      <td style="font-size: 20px;" align="left">Food</td>
                      <td align="right" style="font-size: 30px;">&#8358;1,234,567.00</td>
                      <td align="right">
                        <div style="font-size: 25px;color: #008000; float: left">&#9650;</div>
                        <p style="float: left; margin: 0; font-size: 20px">23%</p>
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size: 20px;" align="left">Gadgets</td>
                      <td align="right" style="font-size: 30px;">&#8358;901,234.00</td>
                      <td align="right">
                        <div style="font-size: 25px;color: #008000; float: left">&#9650;</div>
                        <p style="float: left; margin: 0; font-size: 20px">74%</p>
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size: 20px;" align="left">Entertainment</td>
                      <td align="right" style="font-size: 30px;">&#8358;789,012.00</td>
                      <td align="right">
                        <div style="font-size: 25px;color: #008000; float: left">&#9650;</div>
                        <p style="float: left; margin: 0; font-size: 20px">23%</p>
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size: 20px;" align="left">School Fees</td>
                      <td align="right" style="font-size: 30px;">&#8358;567,890.00</td>
                      <td align="right">
                        <div style="font-size: 25px;color: #008000; float: left">&#9650;</div>
                        <p style="float: left; margin: 0; font-size: 20px">10%</p>
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size: 20px;" align="left">Health Care</td>
                      <td align="right" style="font-size: 30px;">&#8358; 345,678.00</td>
                      <td align="right">
                        <div style="font-size: 25px;color: #008000; float: left">&#9650;</div>
                        <p style="float: left; margin: 0; font-size: 20px">6%</p>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <!-- // CONTENT TABLE -->
              </td>
            </tr>
          </table>
          <!-- // FLEXIBLE CONTAINER -->
        </td>
      </tr>
    </table>
    <!-- // CENTERING TABLE -->
  </td>
</tr>

它如何在gmail和yahoo的web版本上看起来：

它在Outlook桌面客户端上的外观（可怕）：

Answer 1

我强烈建议使用display：inline-block，因为浮点数根本不适用于Outlook。关于电子邮件的用途和不用，a great reference为{{3}}。

Answer 2

我建议将最后一列更改为一个span，从它和段落中删除float：left - 实际上，完全删除段落标记，并将tag-size添加到标记中，该标记应保留对齐，不对。你为可怜的小小的Outlook提供了太多矛盾的指示。

响应式电子邮件（Outlook 2016）问题

2 个答案: