HTML 在 Outlook 2016 中呈现不正确？

Question

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

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

然而，table 元素在左侧居中，但在右侧它溢出到电子邮件的右手边。

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

中

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

HTML 相关 table:

    <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 与 table 有关：

    <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>

CodePen link 完整 HTML 代码： https://codepen.io/Java123999/pen/zYGBoPe

问题截图，注意table左边的段落符合右边的段落

Answer 1

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

HTML 在 Outlook 2016 中呈现不正确？

HTML rendering incorrectly in Outlook 2016?

html

css

outlook

html-table

handlebars.js