134

我正在尝试创建一个 HTML 电子邮件，它将在所有广泛使用的电子邮件客户端中正确显示。我将整个电子邮件包装在一个表格中，并且我希望它的宽度达到可用宽度的 98%，但不超过 800 像素。像这样： <table style="width:98%; max-width:800px;">

但我不是那样做的，因为根据这个Outlook 2007 不支持 CSS 宽度属性。

相反，我这样做： <table width="98%">

有没有办法在不依赖 CSS 的情况下也设置最大宽度？

4

5 回答 5

276

是的，有一种方法可以max-width使用表格进行模拟，从而为您提供响应式和 Outlook 友好的布局。更重要的是，这个解决方案不需要条件注释。

假设您想要一个以 为中心的div等价max-width物350px。您创建一个表格，将宽度设置为100%. 该表连续三个单元格。将中心的宽度设置TD为350（使用 HTMLwidth属性，而不是 CSS），然后就可以了。

如果您希望您的内容左对齐而不是居中，只需省略第一个空单元格。

例子：

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table>

在 jsfiddle 我给表格一个边框，这样你就可以看到发生了什么，但显然你不会在现实生活中想要一个：

http://jsfiddle.net/YcwM7/

于 2014-06-30T22:32:13.523 回答
36

您可以使用条件 html 注释对 Outlook 2007 执行一个技巧。
下面的代码将确保 Outlook 表格是 800px 宽，它不是最大宽度，但它比让表格跨越整个窗口更好。

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>
于 2011-09-01T19:27:39.187 回答
14

简短的回答：不。

长答案：

固定格式更适合 HTML 电子邮件。根据我的经验，当涉及到 HTML 电子邮件时，你最好假装它是 1999 年。尽可能在表格定义中明确并使用 HTML 属性 (width="650")，而不是 CSS (style="width:650px")。使用固定宽度，没有百分比。一个 650 像素宽的表格是安全的选择。使用内联 CSS 设置文本属性。

这与“HTML 电子邮件”中的工作原理无关，而是过多的电子邮件客户端及其有限的（有时在 Gmail、Hotmail 等情况下故意如此）呈现 HTML 的能力。

于 2010-03-11T15:24:43.313 回答
5

派对迟到了，但这会完成。我将示例保留为 600，因为这是大多数人会使用的：

与 Shay 的示例类似，除了这还包括在其他支持的客户端上工作的最大宽度，以及防止 Outlook '11 所需的扩展（媒体查询）的第二种方法。

在头上：

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

在身体里：

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

这是另一个使用中的示例：响应式订单确认电子邮件用于移动设备？

于 2014-02-10T15:36:25.143 回答
1

这是对我有用的解决方案

https://gist.github.com/elidickinson/5525752#gistcomment-1649300，感谢@philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
于 2016-05-12T21:52:18.873 回答