0

我使用这个响应式电子邮件模板设计了一个表格报告电子邮件模板，但不幸的是它在 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 桌面客户端上的外观（可怕）：

Gmail 屏幕截图



Outlook 桌面客户端

4

2 回答 2

3

我强烈建议使用 display: inline-block 因为浮点数根本不适用于 Outlook。这是一个很好的参考，可以帮助您了解哪些内容适用于电子邮件，哪些内容不适用。

于 2016-11-28T21:07:32.150 回答
1

我建议将最后一列中的 in 更改为跨度，从它和段落中删除 float: left - 事实上，完全删除段落标签，并将 font-size 添加到标签中，它应该左对齐，而不是正确的。你给可怜的小 Outlook 提供了太多相互矛盾的指示。

于 2016-11-28T20:59:00.750 回答