是否有CSS最大宽度，在HTML邮件工作的等效？
https://stackoverflow.com/questions/2426072
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我试图创建一个HTML电子邮件将在所有广泛使用的电子邮件客户端正确显示。我在包裹表整个电子邮件，我想它有一个宽度达可用宽度的98％，但不超过800个像素。像这样：
<table style="width:98%; max-width:800px;">
但我不会做这样的说法，因为
相反，我这样做：
<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我给桌上的边界，所以你可以看到发生了什么事情，但显然你不希望一个在现实生活中：
其他提示
有一个小窍门，你可以使用条件HTML注释为Outlook 2007中这样做。结果 下面的代码将确保展望台是800像素宽，它不是最大宽度，但它比整个窗口让表跨度更好。
<!--[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格式的电子邮件更好。在我的经验，你最好假装这是1999年，当涉及到HTML电子邮件。要明确并使用HTML属性（WIDTH =“650”）在以往任何时候可能你的表定义，而不是CSS（样式=“宽度：650像素”）。使用固定宽度，不提供具体比例。的650个像素的表宽度宽是一个安全的赌注。使用内联CSS设置文本属性。
这不是在“HTML邮件”什么工作的问题，而是电子邮件客户端的过多和他们有限的（有时是故意这样在Gmail，Hotmail的等的情况下）的能力来渲染HTML。
位迟到了，但是这将完成它。我离开的例子，在600，因为这是大多数人会用什么：
类似于吉文的例子，除了此的还包括最大宽度以上做有支持客户端的其余部分，以及以防止膨胀（媒体查询）的第二方法的工作是需要用于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 时，由于 @菲利普-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"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
