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

115

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?

Tim Goodman
sumber
1
Saya telah memperbarui jawaban yang diterima untuk yang dari @MarkNugent karena tampaknya telah menarik konsensus - bahkan jika terlambat 4 tahun untuk berguna bagi saya. :)
Tim Goodman

Jawaban:

225

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/

Mark Nugent
sumber
18
Ini adalah jawaban terbaik di sini semuanya ^^^. Abaikan jawaban yang diterima dan jawaban bersyarat.
Nick Manning
4
Hanya untuk menghemat waktu orang lain, setidaknya satu dari elemen <td> kosong itu diperlukan, atau <td> dengan konten akan meregang untuk mengisi seluruh <tr>. Tapi ini jelas merupakan solusi terbaik dari yang ditawarkan.
Chris Strickland
2
@Phyllis Sutherland Anda dapat mencoba untuk menghapus ukuran img inline dan menggantinya dengan:style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
morespace54
5
berhati-hatilah untuk tidak menambahkan unit ke lebar bagian dalam seperti yang saya lakukan atau tidak akan berhasil! yaitu jangan lakukan width = "350px"
magritte
3
@PhyllisSutherland menemukan perbaikan untuk gambar: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…
cbron
34

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>
Shay Erlichmen
sumber
6
saran yang sangat baik, tetapi karena ini adalah pemilih id dan bukan kelas, Anda akan menghemat beberapa pengetikan dengan menggunakan
atribut
Ini bagus. Kecuali untuk satu masalah, dengan mengatur lebar, Outlook tidak akan membiarkan email menyusut lebih kecil dari dimensi yang diberikan. Dengan tidak menyetel lebar, email akan meluas ke seluruh layar. Pilih racun Anda :)
Koordinator
13

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.

Diodeus - James MacFarlane
sumber
Ya, itulah yang saya harapkan, tapi saya pikir saya akan bertanya.
Tim Goodman
35
Menyetel lebar tetap 650 akan membuat email Anda terlihat buruk di klien email seluler.
DrewB
6
-1: Terlihat mengerikan karena perangkat seluler memiliki dimensi yang relatif kecil di dunia nyata. Artinya, tanpa zoom dan panning, teks dalam desain Anda akan menjadi sangat kecil. Lihat panduan Monitor Kampanye Desain Email Responsif .
Karl Horky
1
-1 juga karena saya baru saja menangani ini di klien seluler dan memiliki lebar tetap adalah masalah saya.
Brian FitzGerald
7
Tahun 2015. Perangkat seluler ada di mana-mana. Anda mengatakan untuk melupakan perangkat seluler karena pandangan bodoh? Saya katakan, lupakan tentang pandangan. Dan setiap produk jelek lainnya dari Microsoft.
refaelio
5

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?

John
sumber
0

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>
henry
sumber
Bisakah Anda memberikan contoh yang lebih ringkas, ada banyak hal di sana yang tidak diperlukan untuk menyelesaikan pertanyaan
EdL
@EdL idenya adalah bahwa adalah cara ringkas yang paling mendapatkan email-ramah max-width. Semuanya ini akan menggantikan <div style="max-width: ...px">...</div>. Untuk email yang saya kerjakan ketika saya menemukan intinya, ini adalah satu-satunya solusi yang membuat segalanya terlihat benar di Outlook 2010, 2013, dan 2016.
henry
@henry Saya lebih mengacu pada semua atribut cellpadding font-size dll. Gambar adalah sesuatu yang rumit karena kecuali Anda menentukan width = "500" sebagai atribut, di mana 500 adalah lebar dalam piksel, pandangan akan membuat gambar menjadi ukuran penuh ( wrt. file gambar) ini biasanya menghasilkan lebar tetap.
EdL
Membiarkan ini apa adanya karena ini bukan kode saya — saya hanya mengutipnya dari intinya — tetapi saya telah menjadikannya wiki komunitas. Saya percaya itu adalah perlu secara eksplisit menentukan 0px paddingdan margins serta 0 cellpaddingdan cellspacing. Mungkin menentukan line-heightakan bekerja sebagai pengganti untuk font-sizemengisi waktu heightyang tidak dihormati (saya ingin mengujinya pada semua trdan kemudian pada semua tduntuk melihat dengan tepat di mana itu diperlukan). @EdL jika Anda bisa mendapatkan solusi yang lebih ringan yang bekerja sebaik ini yang akan luar biasa - silakan posting di sini dan di inti tertaut itu
henry