Outlook 更改表格上的边框 css答案

【问题标题】：Outlook changing border css on tableOutlook 更改表格上的边框 css
【发布时间】：2015-01-07 20:39:48
【问题描述】：

我在创建一些 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>

【问题讨论】：

campaignmonitor.com/css 这是一个方便的页面，用于检查某些邮件程序是否可以使用样式。由于 Outlook 中不允许使用边框间距。
@Deer-Outdoor.nl 是的，它是一个方便的工具，到目前为止我一直在使用它。但我没有在我的代码中使用边框间距？
哎呀，你是对的，这是单元格间距 xD 抱歉！

标签： html css email outlook outlook-2013

【解决方案1】：

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

【讨论】：

感谢您解释代码如何解决 Outlook 的想法。 +1

【解决方案2】：

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

Litmus blog on this

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

【讨论】：

我也觉得 cellpadding 也不是很好支持，所以最好也尝试将其设置为零。

【解决方案3】：

我在搜索答案时很快就遇到了这个问题，但没有其他答案适合我。

在我的情况下，答案是在我的<table> 上使用以下内联样式：

style="border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"

【讨论】：

这解决了我的表格边框渲染问题。 Microsoft Outlook 似乎需要使用这些特殊属性才能正确呈现表格。