Outlook 2016 中的 HTML 呈现不正确？

Question

我使用HandlebarsJS 创建了一个简单的HTML 电子邮件模板。

我已将文本和表格设置为在电子邮件中居中。

但是表格元素在左侧居中但在右侧溢出到电子邮件的右侧边框。

当我在chrome 中打开 HTML 文件时，不会发生这种情况 - 仅在 Outlook 中。

如何在 Outlook 中避免这种情况？

与表格相关的 HTML：

    <div class="table">
    <table id="carTable" role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tbody>
        <tr>
            <th>Car Number</th>
            <th>Group</th>
        </tr>
        <!-- {{#each cars}} -->
        <tr>
            <td>{{carNumber}}</td>
            <td>{{processGroup}}</td>
        </tr>
        <!--{{/each}} -->
        </tbody>
    </table>
</div>

与表格相关的 CSS：

    <style>
    #carTable tr, td, th {
   padding: 10px;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.38;
   letter-spacing: normal;
   color: #333333;
   }

   #carTable{
   border: solid 1px #cccccc;
   }

   #carTable td,
   th {
   height: 30px;
   transition: all 0.3s;
   /* Simple transition for hover effect */
   }

   #carTable th {
   background: #DFDFDF;
   /* Darken header a bit */
   font-weight: bold;
   text-align: left
   }

   #carTable td {
   background: #FAFAFA;
   text-align: left
   }

   /* Cells in even rows (2,4,6...) are one color */
   #carTable tr:nth-child(even) td {
   background: #F1F1F1;
   }

   /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
   #carTable tr:nth-child(odd) td {
   background: #FEFEFE;
   }

   #carTable tr>:nth-child(1):not(th){
   font-weight: bold;
   color: #2d89ac;
   }
   </style>

带有完整 HTML 代码的 CodePen 链接： https://codepen.io/Java123999/pen/zYGBoPe

问题的屏幕截图，注释表格与左侧的段落一致但不在右侧

Answer 1

Outlook 使用 Microsoft Word 作为呈现引擎。你必须遵守 Outlook 的规则。使用带有表格的老式 HTML，并在可能的情况下包含内联样式。要在 Outlook 中快速测试，假设您可以访问它，请尝试给自己发送一封 HTML 电子邮件。我不知道您使用的是什么版本，但快速搜索“outlook 发送 html 电子邮件”应该会提供良好的结果。