HTML e-postalarında çalışan CSS maksimum genişliğinin bir eşdeğeri var mı?

Yaygın olarak kullanılan tüm e-posta istemcilerinde düzgün görüntülenecek bir HTML e-postası oluşturmaya çalışıyorum. Tüm e-postayı bir tabloya sarıyorum ve mevcut genişliğin% 98'ine kadar ancak 800 pikselden fazla olmayan bir genişliğe sahip olmasını istiyorum. Bunun gibi: <table style="width:98%; max-width:800px;">

Ancak bu şekilde yapmıyorum, çünkü bu Outlook 2007'ye göre CSS genişlik özelliğini desteklemiyor.

Bunun yerine şunu yapıyorum: <table width="98%">

CSS'ye güvenmeden maksimum genişlik ayarlamanın bir yolu var mı?

Evet, max-widthbir tablo kullanarak öykünmenin bir yolu var , böylece size hem duyarlı hem de Outlook dostu bir düzen sağlıyor. Dahası, bu çözüm koşullu yorumlar gerektirmez.

Eğer merkezli bir eşdeğer istediğinizi varsayalım divile max-widtharasında 350px. Bir tablo oluşturursunuz, genişliği olarak ayarlarsınız 100%. Tabloda arka arkaya üç hücre bulunur. Merkezi genişliğini ayarlayın TDiçin 350(HTML kullanarak widthniteliği değil, CSS) ve oraya gitmek.

İçeriğinizin ortalanmak yerine sola hizalanmasını istiyorsanız, ilk boş hücreyi atlamanız yeterlidir.

Misal:

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

Jsfiddle'da, neler olduğunu görebilmeniz için masaya bir sınır veriyorum, ama tabii ki gerçek hayatta bir tane istemezsiniz:

http://jsfiddle.net/YcwM7/

Koşullu html yorumlarını kullanarak Outlook 2007 için yapabileceğiniz bir numara var.
Aşağıdaki kod, Outlook tablosunun maksimum genişliği değil, 800 piksel genişliğinde olmasını sağlar, ancak tablonun tüm pencereye yayılmasına izin vermekten daha iyi çalışır.

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

Kısa cevap: hayır.

Uzun cevap:

Sabit formatlar, HTML e-postaları için daha iyi çalışır. Tecrübelerime göre, HTML e-postaları söz konusu olduğunda 1999'daymış gibi davranmanız en iyisidir. Açık olun ve tablo tanımlarınızda mümkün olan yerlerde CSS değil (style = "width: 650px") HTML niteliklerini (width = "650") kullanın. Sabit genişlikler kullanın, yüzdeler kullanmayın. 650 piksel genişliğinde bir masa genişliği güvenli bir bahistir. Metin özelliklerini ayarlamak için satır içi CSS kullanın.

Bu, "HTML e-postalarında" neyin işe yaradığıyla ilgili değil, daha ziyade e-posta istemcilerinin bolluğu ve bunların sınırlı (ve bazen kasıtlı olarak Gmail, Hotmail vb. Durumlarda) HTML oluşturma yetenekleri.

Partiye biraz geç ama bu işi halledecek. Örneği 600'de bıraktım, çünkü çoğu insan bunu kullanacak:

Shay'in örneğine benzer, ancak bunun dışında desteğe sahip diğer istemcilerde çalışmak için maksimum genişlik ve Outlook '11 için gerekli olan genişletmeyi (medya sorgusu) önlemek için ikinci bir yöntem de içerir.

Kafada:

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

Vücutta:

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

İşte kullanımda olan başka bir örnek: Mobil cihazlar için duyarlı sipariş onayı e-postaları?

Bu benim için çalışan çözüm

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , @ philipp-klinz sayesinde

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