Outlook 2007 完全忽略表格单元格中元素的宽度和高度答案

【问题标题】：Outlook 2007 completely ignores width and height for elements in table cellOutlook 2007 完全忽略表格单元格中元素的宽度和高度
【发布时间】：2018-09-29 22:01:13
【问题描述】：

我正在经历尝试制作在 Outlook 中看起来可以接受的 HTML 电子邮件模板的恐惧，并很快接近 hara-kiri 的点。

我有一个基本的表格设置：三列，所有内容都在中间一列。侧面的柱子只是为了提供间距。该表的width 为 100%，因此它占据了阅读窗口的整个宽度。所以本质上是这样（省略了所有特定于 Outlook 的杂物）：

<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 sn-p 中的位的全部样式声明是这样的：

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 以这种令人愤怒的方式运行？

【问题讨论】：

标签： html css outlook html-email

【解决方案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>

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

编辑：Outlook 2007 中的基表

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

这张图片来自 Litmus。

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

祝你好运。

【讨论】：

Outlook 2007 通常不会忽略填充（尽管它似乎始终会忽略边距声明），不会。 td 元素上的填充在这里工作正常。我遇到的麻烦是，单元格内的元素是 div 还是其他东西都没有关系——它声明的宽度和高度被统一忽略。您的示例在此处做了一些不同的事情（使整个包含表的大小为 200×200，而不是单元格内的框），但即使嵌套表格也不起作用：表格的宽度变为包含单元格的 100%。
我发布了我在 Litmus for Outlook 2007 中运行的代码，并在我的答案中发布了结果图像。我真正理解 Outlook 的挫败感。我希望这会有所帮助。
哦，@JanusBahsJacquet，无关，但对 Shelob 的回答很好。她真的不是任何人的宠物。

【解决方案2】：

这是你可以尝试的。

代码：

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

在 Outlook 版本 1803 中的结果（测试时间：2018 年 4 月 20 日）

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

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

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

【讨论】：