Esiste un equivalente della larghezza massima CSS che funziona nelle e-mail HTML?

Sto cercando di creare un messaggio di posta elettronica HTML che verrà visualizzato correttamente in tutti i client di posta elettronica ampiamente utilizzati. Sto avvolgendo l'intera email in una tabella e mi piacerebbe che avesse una larghezza fino al 98% della larghezza disponibile, ma non superiore a 800 pixel. Come questo: <table style="width:98%; max-width:800px;">

Ma non lo sto facendo in questo modo, poiché secondo questo Outlook 2007 non supporta la proprietà di larghezza CSS.

Invece, sto facendo questo: <table width="98%">

C'è un modo per impostare anche una larghezza massima senza fare affidamento sui CSS?

Sì, c'è un modo per emulare max-widthutilizzando una tabella, offrendoti così un layout reattivo e compatibile con Outlook. Inoltre, questa soluzione non richiede commenti condizionali.

Supponi di volere l'equivalente di un centrato divcon max-widthdi 350px. Crei una tabella, imposta la larghezza su 100%. La tabella ha tre celle di seguito. Imposta la larghezza del centro TDsu 350(utilizzando l' widthattributo HTML , non CSS), e il gioco è fatto.

Se vuoi che il tuo contenuto sia allineato a sinistra anziché centrato, lascia fuori la prima cella vuota.

Esempio:

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

Nel jsfiddle do un bordo al tavolo in modo che tu possa vedere cosa sta succedendo, ma ovviamente non ne vorresti uno nella vita reale:

http://jsfiddle.net/YcwM7/

C'è un trucco che puoi fare per Outlook 2007 usando commenti html condizionali.
Il codice seguente assicurerà che la tabella di Outlook sia larga 800 px, non la sua larghezza massima ma funziona meglio che lasciare che la tabella si estenda su tutta la finestra.

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

La risposta breve: no.

La lunga risposta:

I formati fissi funzionano meglio per le email HTML. Nella mia esperienza è meglio fingere che sia il 1999 quando si tratta di e-mail HTML. Sii esplicito e utilizza attributi HTML (larghezza = "650") ove possibile nelle definizioni di tabella, non CSS (stile = "larghezza: 650 px"). Usa larghezze fisse, nessuna percentuale. Una larghezza del tavolo di 650 pixel è una scommessa sicura. Usa CSS in linea per impostare le proprietà del testo.

Non è una questione di ciò che funziona in "email HTML", ma piuttosto la pletora di client di posta elettronica e la loro capacità limitata (e talvolta deliberatamente così nel caso di Gmail, Hotmail, ecc.) Di rendere HTML.

Un po 'in ritardo per la festa, ma finirà. Ho lasciato l'esempio a 600, poiché è quello che la maggior parte delle persone userà:

Simile all'esempio di Shay, tranne che include anche la larghezza massima per funzionare sul resto dei client che hanno il supporto, nonché un secondo metodo per impedire l'espansione (media query) necessaria per Outlook '11.

Nella testa:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

Nel corpo:

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

Ecco un altro esempio di questo in uso: e-mail di conferma dell'ordine reattivo per dispositivi mobili?

Questa è la soluzione che ha funzionato per me

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , grazie a @ 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>