Existe um equivalente de largura máxima CSS que funciona em E-mails HTML?

estou a tentar criar um e-mail HTML que irá aparecer correctamente em todos os clientes de E-mail amplamente utilizados. Estou embrulhando todo o e-mail em uma tabela, e eu gostaria que tivesse uma largura que é até 98% da largura disponível, mas não maior que 800 pixels. Comer: <table style="width:98%; max-width:800px;">

Mas eu não estou fazendo isso dessa maneira, já que de acordo com este Outlook 2007 não suporta a propriedade de largura CSS.

Em vez disso, vou fazer isto.: <table width="98%">

Existe alguma maneira de também definir um largura máxima sem contar com CSS?

Author: Tim Goodman, 2010-03-11
Source

5 answers

Sim, há uma maneira de emular {[[1]} usando uma tabela, dando - lhe assim um layout sensível e amigo do Outlook. Além disso, esta solução não requer comentários condicionais.

Suponha que quer o equivalente a um div centrado com max-width de 350px. Você cria uma tabela, configura a largura para 100%. A tabela tem três celas seguidas. Configure a largura do center TD para 350 (usando o atributo HTML width, não o CSS), e aí vai você.

Se quiser o seu o conteúdo alinhado à esquerda em vez de centrado, basta deixar de fora a primeira célula vazia.

Exemplo: 

<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>
No jsfiddle eu dou à mesa uma fronteira para que possas ver o que se passa, mas obviamente não queres uma na vida real.

Http://jsfiddle.net/YcwM7/

 174
Author: Mark Nugent, 2014-10-23 15:40:19

Existe um truque que pode fazer para o Outlook 2007 usando comentários html condicionais.
O código abaixo irá certificar-se de que a tabela Outlook tem 800px de largura, não é de largura máxima, mas funciona melhor do que deixar a tabela passar por toda a janela.

<!--[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>
 33
Author: Shay Erlichmen, 2011-09-01 19:27:39

A resposta curta: não.

A resposta longa:

Os formatos fixos funcionam melhor para E-mails HTML. Pela minha experiência, é melhor fingir que estamos em 1999 quando se trata de E-mails HTML. Seja explícito e use atributos HTML (width="650") sempre que possível em suas definições de tabela, não CSS (style="width:650px"). Usa larguras fixas, sem percentagens. Uma largura de mesa de 650 pixels de largura é uma aposta segura. Use o CSS incorporado para definir as propriedades do texto.

Não é uma questão do que funciona em "HTML emails", but rather the plethora of email clients and their limited (and sometimes propositadamente so in the case of Gmail, Hotmail etc) ability to render HTML.
 12
Author: Diodeus - James MacFarlane, 2010-03-11 16:00:38
Um pouco tarde para a festa, mas isto vai acabar. Deixei o exemplo em 600, pois é o que a maioria das pessoas usará:

Semelhante ao exemplo de Shay excepto este também inclui a largura máxima para trabalhar no resto dos clientes que têm suporte, bem como um segundo método para evitar a expansão (pesquisa de mídia) que é necessária para o Outlook '11.

Na cabeça: 

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

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

Aqui está outro exemplo disto em uso: responsivo pedir e-mails de confirmação para dispositivos móveis?

 4
Author: John, 2017-05-23 12:10:45

Esta é a solução que funcionou para mim

Https://gist.github.com/elidickinson/5525752#gistcomment-1649300, graças 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>
 0
Author: henry, 2017-03-12 20:10:35