在HTML电子邮件中是否有相当于CSS max-width？

问题描述

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

I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this:<table style="width:98%; max-width:800px;">

但是我没有这样做，因为 Outlook 2007不支持CSS宽度属性。

But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.

相反，我这样做：
< table width =98％> ;

有没有办法也可以设置max-width而不依赖于CSS？

Is there any way to also set a max-width without relying on CSS?

推荐答案

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

Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.

假设你想要一个居中的 div 与 max-width 350px 。您创建一个表，将宽度设置为 100％。表中有三个单元格。将中心的宽度 TD 设置为 350 （使用HTML 宽度属性，而不是CSS），你去。

Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.

如果您希望将内容放在左边而不是居中，那么请先排除第一个空单元格。

If you want your content aligned left instead of centered, just leave out the first empty cell.

示例：

<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中，我给表格一个边框，所以你可以看到发生了什么，但显然你会不想在现实生活中有一个：

In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:

这篇关于在HTML电子邮件中是否有相当于CSS max-width？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！