¿Existe un equivalente de CSS de ancho máximo que funcione en correos electrónicos HTML?

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

Pero no lo estoy haciendo de esa manera, ya que según este Outlook 2007 no es compatible con la propiedad de ancho de CSS.

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

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

Sí, hay una forma de emular el max-widthuso de una tabla, lo que le brinda un diseño receptivo y compatible con Outlook. Además, esta solución no requiere comentarios condicionales.

Suponga que quiere el equivalente de un centrado divcon max-widthde 350px. Creas una tabla, estableces el ancho en 100%. La tabla tiene tres celdas seguidas. Establezca el ancho del centro TDen 350(usando el widthatributo HTML , no CSS) y listo.

Si desea que su contenido esté alineado a la izquierda en lugar de 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 le doy a la tabla un borde para que pueda ver lo que está pasando, pero obviamente no querría uno en la vida real:

http://jsfiddle.net/YcwM7/

Hay un truco que puede hacer para Outlook 2007 utilizando comentarios html condicionales.
El código a continuación 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 se extienda por 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>

La respuesta corta: no.

La respuesta larga:

Los formatos fijos funcionan mejor para los correos electrónicos HTML. En mi experiencia, es mejor fingir 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 CSS (estilo = "ancho: 650 px"). Utilice anchos fijos, sin porcentajes. Una mesa de 650 píxeles de ancho es una apuesta segura. Utilice 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 plétora de clientes de correo electrónico y su capacidad limitada (y a veces deliberadamente en el caso de Gmail, Hotmail, etc.) para representar HTML.

Un 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 esto también incluye el ancho máximo para trabajar en el resto de los clientes que sí tienen soporte, así como un 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 en uso: ¿ Correos electrónicos de confirmación de pedido receptivos para dispositivos móviles?

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>