Esiste un equivalente di CSS max-width che opera nelle e-mail HTML?

Question

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

Ma io non sto facendo in questo modo, dal momento che secondo questa Outlook 2007 non supporta la proprietà width CSS.

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

C'è un modo per impostare anche un max-width senza fare affidamento su CSS?

Answer 1

Sì, c'è un modo per emulare max-width utilizzando una tabella, dando così entrambi i layout reattivo e Outlook-friendly. Cosa c'è di più, questa soluzione non richiede commenti condizionali.

Si supponga di voler l'equivalente di un div centrato max-width di 350px. Si crea una tabella, impostare la larghezza a 100%. La tabella ha tre celle di una riga. Impostare la larghezza del centro TD a 350 (utilizzando l'attributo width HTML, CSS non), e ci si va.

Se si desidera che il contenuto allineato a sinistra invece che al centro, basta lasciare 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 la tabella di un bordo in modo da poter vedere che cosa sta succedendo, ma ovviamente non si vuole uno nella vita reale:

http://jsfiddle.net/YcwM7/

Answer 2

C'è un trucco che si può fare per Outlook 2007 utilizzando i commenti HTML condizionali.
Il codice qui sotto farà in modo che tavolo Outlook è 800px di larghezza, la sua non è max-width ma funziona meglio che lasciare l'arco tavolo attraverso l'intera 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>

Answer 3

La risposta breve:. No

La risposta lunga:

formati fissi funzionano meglio per le email HTML. Nella mia esperienza si sta meglio fuori facendo finta che sia 1999, quando si tratta di HTML messaggi di posta elettronica. Essere esplicito e utilizzare gli attributi HTML (width = "650") dove mai possibile nelle definizioni di tabella, non CSS (style = "width: 650 px"). Utilizzare larghezze fisse, senza percentuali. Una larghezza di lavoro di 650 pixel di larghezza è una scommessa sicura. Usare CSS in linea per impostare le proprietà di testo.

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

Answer 4

po 'tardi per il partito, ma questo sarà avere fatto. Ho lasciato l'esempio a 600, come questo è ciò che la maggior parte delle persone usa:

Simile a esempio di Shay tranne questo comprende anche max-width a lavorare sul resto dei client che hanno il supporto, così come un secondo metodo per impedire l'espansione (media query) che è 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: ordine Responsive -mail di conferma per i dispositivi mobili?

Answer 5

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>