在HTML電子郵件中是否有等效的CSS最大寬度？

Question

我試圖創建一個HTML電子郵件，將在所有廣泛使用的電子郵件客戶端中正確顯示。我將整個電子郵件包裹在一個表格中，我希望它的寬度達到可用寬度的98％，但不超過800像素。像這樣： <table style="width:98%; max-width:800px;">

但是我不這樣做，因爲according to this Outlook 2007不支持CSS寬度屬性。

相反，我這樣做： <table width="98%">

有什麼辦法還設定了最大寬度，而不依賴於CSS？

Answer 1

是的，有一種方法使用模擬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/

Answer 2

簡而言之：沒有。

長答案：

固定格式對HTML電子郵件更好。根據我的經驗，你最好假裝它是1999年的HTML電子郵件。明確地使用HTML屬性（width =「650」），儘可能在表格定義中使用，而不是CSS（style =「width：650px」）。使用固定寬度，無百分比。寬度爲650像素的桌子寬度是安全的。使用內聯CSS設置文本屬性。

這不是一個在「HTML電子郵件」中起作用的問題，而是大量的電子郵件客戶端及其有限的（有時故意在Gmail，Hotmail等情況下）呈現HTML的能力。

Answer 3

有一個技巧，你可以使用條件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 4

對晚會有點遲，但這會完成。我離開的例子，在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]--> 

下面是使用另外一個例子：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>