Question

我正在努力制作在Outlook中看起来可以接受的HTML电子邮件模板，并且很快接近hara-kiri。

我有一个基本的表格设置：三列，所有内容都在中间。侧面的柱子就在那里给出间距。该表的width为100％，因此占用了阅读窗口的整个宽度。所以基本上这个（所有特定于Outlook的crud都被遗漏了）：

<table>
    <tbody>
        <tr>
            <td class="leftsidespacer"></td>
            <td class="maincontent">
                <p>All the content here</p>
                <div class="thisisabox">
                    <p>Something here too</p>
                </div>
            </td>
            <td class="rightsidespacer"></td>
        </tr>
    </tbody>
</table>

在任何普通的电子邮件客户端中，这都是小菜一碟。你在中间栏上设置了一个宽度，这就是它。 Outlook 2007（可能还有其他版本）反而折叠了所有三列，因此中间列占据了体宽的100％。基本上，在表格单元格上设置宽度无效。

好吧，所以我回到真正的旧方法在空单元格中添加图像以强制它们有一些宽度。丑陋和愚蠢，但至少它有点有用。

我现在面临的问题，我神秘地找不到任何人甚至在网上提到，是我放在td 中的任何元素总是最终为100无论我做什么，细胞宽度的百分比和内容的高度。

例如，上面示例中带有div类的thisisabox总是最终只有一行文本高度和100％表格单元格，即使我这样定义它：

<div width="200" height="200"
    style="display: block;
    width: 200px;
    height: 200px;
    background: red;">

我的一切都在尖叫，这应该会产生一个200×200像素的红色框，但事实并非如此。它完全被忽略了。

据我所知，我的风格中没有任何东西可以对此产生任何影响。我对上面HTML代码段中的位的全部样式声明是：

table {
    width: 100%;
    margin: 0;
    padding: 0;
}

table, tr, td {
    border-collapse: collapse;
}

td {
    padding: 35px 0;
    border: 0;
}

（在发送之前它被Premailer API内联并且HTML归属，所以不是因为样式只在head中声明。）

是否有某种方法让Outlook注意到表格单元格中元素的指定宽度和高度？

或者我错过了一些非常明显的东西，让Outlook以这种令人愤怒的方式表现出来？

Answer 1

Outlook不能与div一起使用，在某些情况下会忽略padding。

https://www.campaignmonitor.com/css/box-model/padding/

解决此问题的方法很简单，它适用于每个电子邮件客户端：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>

<table width="200" height="200" cellpadding="0" cellspacing="0">
<tbody>
    <tr>
        <td class="leftsidespacer" width="30"></td>
        <td class="maincontent" width="140">
            <p>All the content here</p>
            <div class="thisisabox">
                <p>Something here too</p>
            </div>
        </td>
        <td class="rightsidespacer" width="30"></td>
    </tr>
</tbody>
</table>

</body>
</html>

我会创建一个样式表并添加大多数现代电子邮件客户端将会选择的值，但是像2007-2016这样的Outlook桌面版需要一些内联辅助工具才能正常运行。

编辑：Outlook 2007中的基表

这是Outlook 2007中的基表，我上面没有额外的css：

这张照片来自Litmus。

我只使用了上面发布的代码。如果您没有看到这一点，那么CSS或HTML中的某些内容就会导致问题。

祝你好运。

Answer 2

这是你可以尝试的东西。

<强>代码：

＆＃13;

<table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000">
<tbody>
    <tr>
	<td height="200"></td>
        <td valign="top" style="color:#ffffff;">
            All content here

        </td>
    </tr>
</table>

＆＃13;

Outlook版本1803中的结果（已测试：20/04/2018）

enter image description here

我所做的是为表格元素和其中一个单元格添加一个高度。您可以使用间隔图像填充左列，也可以保持原样。

注意：如果您愿意，可以不使用左栏，但可以添加高度

希望这是您正在寻找的答案。

Outlook 2007完全忽略表格单元格

是否有某种方法让Outlook注意到表格单元格中元素的指定宽度和高度？

2 个答案: