4

我在创建一些 HTML 电子邮件以在 Outlook 桌面 2013 中正确显示时遇到问题，到目前为止，我已经设法解决了我无法理解的边界问题。

基本上在 Outlook Web 应用程序中，我的表格如下所示：http: //imgur.com/EqbluKF

但在 Outlook 2013 上，它看起来像这样：http: //imgur.com/s1ZQRqW

这是我的表代码，在 Outlook 吃掉它并把它弄得一团糟之前：

<table cellspacing="0" cellpadding="1" border="0" align="center" width="100%" style="margin:auto;">
<thead>
    <tr height="40" style="background-color: #CFE1D3; ">
        <th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Item') ?></strong></th>
        <th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Product Code') ?></strong></th>
        <th align="center" width="30%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('Product Description') ?></strong></th>
        <th align="center" width="10%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 1px 0 1px;"><strong><?php echo $this->__('Quantity') ?></strong></th>
    </tr>
</thead>
<tbody>
   <tr>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;"><img src="images/product"  alt="test" width="100%" height="auto" align="left" /></td>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">test</td>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">This is a test</td>
     <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-top-width: 0;">1</td>
   </tr>
</tbody>

4

3 回答 3

3

在寻找答案时，我很快就遇到了这个问题，但其他答案都不适合我。

就我而言，答案是在 my 上使用以下内联样式<table>：

style="border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"
于 2016-02-24T22:09:35.413 回答
2

border-color尝试在您的:上使用 6 位十六进制颜色代码#777777，不同的客户端不完全支持 3 位十六进制代码，您会发现它们之间的颜色可能会发生变化。（虽然如果您使用 6 位数字，它将在所有内容中保持一致，因此请尝试养成这种习惯）。

石蕊博客关于这个

您还应该style="display:block";在所有图像标签中添加。

于 2014-11-13T16:48:52.723 回答
1

您是否尝试过添加border-collapse: collapse到table的样式属性？基本上 Outlook 假定表格单元格的边框不应重叠，除非被告知。

于 2014-11-13T06:15:38.290 回答