Question

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

但是我没有这样做，因为according to this Outlook 2007不支持CSS width属性。

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

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

Answer 1

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

假设您希望等同于div max-width 350px的{{1}}。您创建一个表，将宽度设置为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/

Answer 2

使用条件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>

Answer 3

答案简短：不。

答案很长：

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

这不是“HTML电子邮件”中有效的问题，而是过多的电子邮件客户端及其有限的（有时是故意的，例如Gmail，Hotmail等）呈现HTML的能力。

Answer 4

派对迟到了，但这样就可以完成。我将示例保留在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]-->

以下是另一个使用示例：Responsive order confirmation emails for mobile devices?

Answer 5

这是适合我的解决方案

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>

是否有相当于CSS最大宽度的HTML电子邮件？

5 个答案: