¿Hay un equivalente del ancho máximo de CSS que funciona en correos electrónicos HTML?

Question

Estoy tratando de crear un correo electrónico HTML que se muestre correctamente en todos los clientes de correo electrónico ampliamente utilizados. Estoy envolviendo todo el correo electrónico en una tabla, y me gustaría que tenga un ancho que es hasta el 98% del ancho disponible, pero no más de 800 píxeles. De esta manera: <table style="width:98%; max-width:800px;">

Pero no voy a hacerlo de esa manera, ya que according to this Outlook 2007 no es compatible con la propiedad width CSS.

En cambio, yo estoy haciendo esto: <table width="98%">

¿Hay alguna manera de establecer también un ancho máximo sin depender de CSS?

Answer 1

Sí, hay una manera de emular max-width usando una tabla, lo que le brinda un diseño receptivo y amigable para Outlook. Además, esta solución no requiere comentarios condicionales.

Suponga que desea el equivalente de un div centrado con max-width de 350px. Crea una tabla, establece el ancho en 100%. La tabla tiene tres celdas en una fila. Establezca el ancho del centro TD en 350 (utilizando el atributo HTML width, no CSS), y listo.

Si desea que su contenido se alinee a la izquierda en lugar de estar centrado, simplemente omita la primera celda vacía.

Ejemplo:

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

En el jsFiddle Doy la mesa un borde para que pueda ver lo que está pasando, pero es obvio que no quiere uno en la vida real:

http://jsfiddle.net/YcwM7/

Answer 2

La respuesta corta: no.

La respuesta larga:

formatos fijos funcionan mejor para los mensajes de correo electrónico HTML. En mi experiencia, es mejor que pretendas que es 1999 cuando se trata de correos electrónicos HTML. Sea explícito y use atributos HTML (ancho = "650") siempre que sea posible en las definiciones de su tabla, no en CSS (style = "width: 650px"). Use anchos fijos, sin porcentajes. Un ancho de mesa de 650 píxeles de ancho es una apuesta segura. Use CSS en línea para establecer las propiedades del texto.

No se trata de lo que funciona en los "correos electrónicos HTML", sino de la gran cantidad de clientes de correo electrónico y su capacidad limitada (y a veces deliberadamente en el caso de Gmail, Hotmail, etc.) para representar HTML.

Answer 3

Hay un truco que puede hacer para Outlook 2007 utilizando los comentarios html condicional.
El siguiente código se asegurará de que la tabla de Outlook tenga 800 px de ancho, no es de ancho máximo, pero funciona mejor que dejar que la tabla abarque toda la ventana.

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

Poco tarde para la fiesta, pero esto lo hará. Dejé el ejemplo en 600, ya que eso es lo que la mayoría de la gente usará:

Similar al ejemplo de Shay, excepto que también incluye ancho máximo para trabajar en el resto de los clientes que sí cuentan con soporte, así como segundo método para evitar la expansión (consulta de medios) que se necesita para Outlook '11.

En la cabeza:

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

En el cuerpo:

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

Aquí hay otro ejemplo de esto está en uso: Responsive order confirmation emails for mobile devices?

Answer 5

Esta es la solución que funcionó para mí

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