表在Outlook中无法正确显示

Question

我有一封电子邮件，其中包含下表。在gmail中进行测试时，看起来绝对不错，但在Outlook中，表格的宽度会缩小，边框不会按预期显示。我已经尽力了，但是似乎没有用。如果您有任何想法，请分享。

<table cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; border-collapse: collapse; padding: 0; width: 100% !important;">
<thead style="font-family: Avenir, Helvetica, sans-serif; margin-top: 0;">
<tr style="color: #000; margin: 0; padding: 0; margin-top: 0; margin-bottom: 0;">
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; margin-top: 0; text-align: left;">Item</th>
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; text-align: left;">Size</th>
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; text-align: right;">Quantity</th>
<th style="border-bottom: 1px solid #cccccc; font-weight: bold; color: #f2a489; margin: 0; font-size: 12px; padding-top: 15px; font-family: Avenir, Helvetica, sans-serif; margin-bottom: 0; text-align: right;">Subtotal</th>
</tr>
</thead>
<tbody style="font-family: Avenir, Helvetica, sans-serif; margin-bottom: 0;">
<tr style="color: #000; margin: 0; padding: 0; margin-top: 0;">
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-top: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Cadburys overload</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Minis</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">6</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-bottom: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">£ 33.00</td>
</tr>
<tr style="color: #000; margin: 0; padding: 0;">
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-top: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Fruit Overload</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Large</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">1</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-bottom: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">£ 78.00</td>
</tr>
<tr style="color: #000; margin: 0; padding: 0; margin-bottom: 0;">
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-top: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;">Total paid</td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: left;"></td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;"></td>
<td style="font-size: 12px; font-family: Avenir, Helvetica, sans-serif; margin: 0; margin-bottom: 0; border-bottom: 1px solid #cccccc !important; padding: 10px 0 !important; text-align: right;">£ 111.00</td>
</tr>
</tbody>
</table>

请在gmail（外观如何）和Outlook中查看表格所附的图像

我已在https://jsfiddle.net/ry2sfq61/

处附加了代码

谢谢！

Answer 1

尝试从!important元素的宽度中删除table，所以宽度仅为：width: 100%;。

如果这不起作用，则可能需要固定静态宽度，而不是百分比，即width: 600px。

Answer 2

在为<td>加上边框时，Outlook臭名昭著。

将其添加到td内嵌样式表中您需要边框的地方：

mso-border-bottom-alt: solid #cccccc 1pt;

如果要使用特定宽度的表格，则必须添加：

<table width="600">您可以尝试<table style="width: 600px;">

有时，Outlook将忽略嵌入式样式表中的width: 100%;或width: 600px;及其他属性。真是头疼。

祝你好运。

Answer 3

根据我的测试，您可以将<table>更改为以下代码：

<table width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; border-collapse: collapse; padding: 0;">

这是我的结果：