在 Outlook 中使用 CSS { white-space: nowrap }答案

【问题标题】：Using CSS { white-space: nowrap } with Outlook在 Outlook 中使用 CSS { white-space: nowrap }
【发布时间】：2015-09-11 20:38:54
【问题描述】：

我目前有一份报告，其中包含许多宽列，我直接通过 SQL 发送电子邮件。我正在为其动态生成 HTML，但遇到了列宽问题。

我已插入以下 CSS：

#tableMain 
TH { 
    text-align: center; 
    white-space: pre; 
    border: 1px solid black; 
    padding: 0; 
    border-spacing: 0; 
    border-collapse: collapse; 
    background-color: #f0f0f0; 
    font: 11pt bold arial sans-serif; 
}

现在，虽然生成的 html 在 IE 中呈现良好，但它坚持将单元格内容包装到 Outlook 中的两行。

在 Internet Explorer 中：

在 Outlook 中

Outlook 是我们公司范围内的电子邮件客户端，因此我不需要支持多个客户端，但我确实需要它在这里正常工作。

非常感谢您的建议。

【问题讨论】：

我没有在这里测试 Outlook，但 Outlook 和 CSS 始终是一个不确定的主题。现在您的代码中white-space 的值与您的问题标题不同，所以问题出现了，您是否测试了这两个值？您是否也测试了其他值？您可以尝试什么作为实验：将nowrap 属性放在每个表格单元格中，给它们一个width 或min-width。另外，您能说一下您需要支持哪个版本的 Outlook 吗？
你好，李斯特。感谢您的回复。不幸的是，我不能直接强制最小宽度，因为列列表是动态生成的。我基本上有一个存储过程，我将一个临时表传递给它和一些其他信息，它会为我生成一封插入表格的电子邮件。稍后我将发布我正在使用的完整代码，已被转移到另一个项目 - 优先事项照常转移 - 这是开发人员的生活！

标签： html css email outlook

【解决方案1】：

我也遇到了这个问题，似乎 Outlook 中电子邮件的最大宽度约为 2200 像素（至少 2007-13 版本）。我猜想在不包装的情况下发送整个表格的一种方法是在 PhantomJS 等无头浏览器中打开动态生成的 HTML 表格，并使用 Javascript 根据列宽将表格拆分为较小的表格，但我认为这种解决方案会相当低效。

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击进行提问。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。
@Michelem 我看不出这个答案应该如何成为评论。这是一个非常好的答案，带有一点深奥的解决问题的想法。

【解决方案2】：

事实上，Outlook 使用 Word（而不是 IE）来呈现电子邮件的 HTML 标记。您可能会在 MSDN 的以下文章中找到所有受支持和不受支持的 HTML 元素、属性和级联样式表属性：

【讨论】：

谢谢尤金，我会看看这个。我认为我正在达到最大屏幕宽度，因为如果我有更少的列，事情会很好地显示。我会看看你稍后发布的链接，我被拉到一个不同的项目短期。干杯。
感谢 rtfm 的回答，只有第一个链接有关于 nowrap 的文档。而且，我发现 Outlook 不尊重 td 属性或 div 属性，尽管列在那里。所以，这个答案是不正确的。