Apakah ada CSS max-width yang berfungsi di email HTML?

Saya mencoba membuat email HTML yang akan ditampilkan dengan benar di semua klien email yang banyak digunakan. Saya membungkus seluruh email dalam sebuah tabel, dan saya ingin itu memiliki lebar hingga 98% dari lebar yang tersedia, tetapi tidak lebih dari 800 piksel. Seperti ini: <table style="width:98%; max-width:800px;">

Tapi saya tidak melakukannya seperti itu, karena menurut Outlook 2007 ini tidak mendukung properti lebar CSS.

Sebaliknya, saya melakukan ini: <table width="98%">

Apakah ada cara untuk mengatur lebar-maksimal tanpa bergantung pada CSS?

Ya, ada cara untuk meniru max-widthmenggunakan tabel, sehingga memberi Anda tata letak responsif dan ramah Outlook. Terlebih lagi, solusi ini tidak memerlukan komentar bersyarat.

Misalkan Anda ingin setara dengan berpusat divdengan max-widthdari 350px. Anda membuat tabel, atur lebarnya menjadi 100%. Tabel ini memiliki tiga sel berturut-turut. Setel lebar tengah TDke 350(menggunakan widthatribut HTML , bukan CSS), dan begitulah.

Jika Anda ingin konten Anda rata kiri, bukan di tengah, biarkan sel kosong pertama.

Contoh:

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

Di jsfiddle saya memberi batas pada tabel sehingga Anda dapat melihat apa yang terjadi, tetapi jelas Anda tidak menginginkannya di kehidupan nyata:

http://jsfiddle.net/YcwM7/

Ada trik yang dapat Anda lakukan untuk Outlook 2007 menggunakan komentar html bersyarat.
Kode di bawah ini akan memastikan bahwa tabel Outlook memiliki lebar 800px, bukan lebar maksimalnya tetapi berfungsi lebih baik daripada membiarkan tabel menjangkau seluruh jendela.

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

Jawaban singkatnya: tidak.

Jawaban panjangnya:

Format tetap berfungsi lebih baik untuk email HTML. Menurut pengalaman saya, paling baik Anda berpura-pura bahwa itu tahun 1999 dalam hal email HTML. Bersikaplah eksplisit dan gunakan atribut HTML (width = "650") jika memungkinkan dalam definisi tabel Anda, bukan CSS (style = "width: 650px"). Gunakan lebar tetap, tanpa persentase. Lebar meja dengan lebar 650 piksel adalah taruhan yang aman. Gunakan CSS sebaris untuk mengatur properti teks.

Ini bukan masalah apa yang berfungsi di "email HTML", melainkan kebanyakan klien email dan kemampuan mereka yang terbatas (dan terkadang sengaja demikian dalam kasus Gmail, Hotmail, dll) untuk merender HTML.

Agak terlambat ke pesta, tapi ini akan menyelesaikannya. Saya meninggalkan contoh di 600, karena itulah yang akan digunakan kebanyakan orang:

Mirip dengan contoh Shay kecuali ini juga mencakup lebar maksimal untuk bekerja pada klien lain yang memiliki dukungan, serta metode kedua untuk mencegah perluasan (kueri media) yang diperlukan untuk Outlook '11.

Di kepala:

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

Di dalam tubuh:

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

Berikut adalah contoh lain yang digunakan: Email konfirmasi pesanan responsif untuk perangkat seluler?

Ini adalah solusi yang berhasil untuk saya

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , terima kasih kepada @ 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>