在HTML电子邮件中是否有等效的CSS最大宽度？

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

但是我没有那样做，因为根据此 Outlook 2007不支持CSS width属性。

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

有没有办法不用依靠CSS来设置最大宽度？

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

假设你想要的中心相当于div用max-width的350px。创建表格，将宽度设置为100%。该表连续三个单元格。将中心的宽度设置TD为350（使用HTML width属性，而不是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/

您可以使用条件html注释为Outlook 2007做一个技巧。
下面的代码将确保Outlook表格的宽度为800px，而不是max-width，但其效果要好于让表格跨越整个窗口。

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

简短的回答：不。

长答案：

固定格式更适合HTML电子邮件。以我的经验，关于HTML电子邮件，您最好假装是1999年。要明确，并在表定义中尽可能使用HTML属性（width =“ 650”“，而不是CSS（style =” width：650px“）。使用固定的宽度，没有百分比。650像素宽的表格宽度是安全的选择。使用内联CSS设置文本属性。

这与“ HTML电子邮件”中的工作方式无关，而是过多的电子邮件客户端及其有限的呈现HTML的能力（对于Gmail，Hotmail等，有时是故意的）。

参加聚会有点晚，但这可以解决。我将示例保留为600，因为大多数人会使用以下示例：

与Shay的示例相似，除了它还包括max-width以便在其他确实有支持的客户端上工作，以及第二种防止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]-->

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

这是对我有用的解决方案

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>