¿Hay un equivalente de CSS max-width que funciona en correos electrónicos HTML?
Estoy tratando de crear un correo electrónico HTML que se mostrará 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 tuviera un ancho que sea de hasta el 98% del ancho disponible, pero no superior a 800 píxeles. Así:
<table style="width:98%; max-width:800px;">
Pero no lo estoy haciendo de esa manera, ya que de acuerdo con este Outlook 2007 no es compatible con la propiedad CSS width.
En cambio, estoy haciendo esto:
<table width="98%">
¿Hay alguna manera de establecer también un ancho máximo sin depender de CSS?
5 answers
Sí, hay una manera de emular max-width usando una tabla, lo que le brinda un diseño receptivo y amigable con Outlook. Además, esta solución no requiere comentarios condicionales.
Supongamos que desea el equivalente de un centrado div con max-width de 350px. Se crea una tabla, se establece el ancho en 100%. La tabla tiene tres celdas seguidas. Establezca el ancho del centro TD en 350 (usando el atributo HTML width, no CSS), y ahí lo tiene.
Si quieres tu contenido alineado a la izquierda en lugar de centrado, simplemente deje fuera 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 mesa un borde para que puedas ver lo que está pasando, pero obviamente no querrías uno en la vida real:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-23 15:40:19
Hay un truco que puede hacer para Outlook 2007 utilizando comentarios html condicionales.
El siguiente código se asegurará de que la tabla de Outlook sea de 800px 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-01 19:27:39
La respuesta corta: no.
La respuesta larga:
Los formatos fijos funcionan mejor para correos electrónicos HTML. En mi experiencia, lo mejor es fingir que es 1999 cuando se trata de correos electrónicos HTML. Sea explícito y use atributos HTML (width="650") siempre que sea posible en las definiciones de la tabla, no CSS (style="width:650px"). Utilice anchos fijos, sin porcentajes. Un ancho de mesa de 650 píxeles de ancho es una apuesta segura. Utilice CSS en línea para establecer las propiedades del texto.
No es una cuestión de lo que funciona en " HTML correos electrónicos", sino más bien 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 renderizar HTML.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-11 16:00:38
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 este también incluye max-width para trabajar en el resto de los clientes que tienen soporte, así como un segundo método para evitar la expansión (media query) 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: Orden de respuesta ¿correos electrónicos de confirmación para dispositivos móviles?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:45
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"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-12 20:10:35