Existe um equivalente de CSS max-width que funciona em emails HTML?

Estou tentando criar um e-mail em HTML que será exibido corretamente em todos os clientes de e-mail amplamente usados. Estou empacotando todo o e-mail em uma tabela e gostaria que ele tivesse uma largura de até 98% da largura disponível, mas não superior a 800 pixels. Como isso: <table style="width:98%; max-width:800px;">

Mas não estou fazendo assim, pois de acordo com este Outlook 2007 não suporta a propriedade de largura do CSS.

Em vez disso, estou fazendo isso: <table width="98%">

Existe alguma maneira de também definir uma largura máxima sem depender de CSS?

Sim, existe uma maneira de emular max-widthusando uma tabela, proporcionando um layout responsivo e amigável ao Outlook. Além do mais, esta solução não requer comentários condicionais.

Suponha que você queira o equivalente a centralizado divcom max-widthde 350px. Você cria uma tabela, define a largura para 100%. A tabela possui três células em uma linha. Defina a largura do centro TDpara 350(usando o HTMLwidth atributo , não CSS) e pronto.

Se você deseja que seu conteúdo seja alinhado à esquerda em vez de centralizado, apenas deixe 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 uma borda à mesa para que você possa ver o que está acontecendo, mas obviamente você não iria querer uma na vida real:

http://jsfiddle.net/YcwM7/

Há um truque que você pode fazer no Outlook 2007 usando comentários html condicionais.
O código a seguir garantirá que a tabela do Outlook tenha 800 px de largura, não a largura máxima, mas funciona melhor do que permitir que a tabela se estenda 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>

A resposta curta: não.

A longa resposta:

Os formatos fixos funcionam melhor para emails em HTML. Em minha experiência, é melhor fingir que é 1999 quando se trata de e-mails em HTML. Seja explícito e use atributos HTML (largura = "650") sempre que possível nas definições de sua tabela, não CSS (estilo = "largura: 650px"). Use larguras fixas, sem porcentagens. Uma mesa com largura de 650 pixels é uma aposta segura. Use CSS embutido para definir propriedades de texto.

Não é uma questão de o que funciona em "emails HTML", mas sim a abundância de clientes de email e sua capacidade limitada (e às vezes deliberadamente no caso do Gmail, Hotmail, etc.) de renderizar HTML.

Um pouco tarde para a festa, mas isso resolverá. Deixei o exemplo em 600, pois é isso que a maioria das pessoas usará:

Semelhante ao exemplo de Shay, exceto que também inclui largura máxima para trabalhar no resto dos clientes que têm suporte, bem como um segundo método para evitar a expansão (consulta 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 em uso: E -mails de confirmação de pedido responsivos para dispositivos móveis?

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>