Có tương đương với chiều rộng tối đa CSS hoạt động trong email HTML không?

Question

Tôi đang cố gắng tạo một email HTML sẽ hiển thị đúng trong tất cả các ứng dụng email được sử dụng rộng rãi. Tôi đang gói toàn bộ email trong một bảng và tôi muốn nó có chiều rộng lên tới 98% chiều rộng có sẵn, nhưng không lớn hơn 800 pixel. Như thế này: <table style="width:98%; max-width:800px;">

Nhưng tôi không làm theo cách đó, vì according to this Outlook 2007 không hỗ trợ thuộc tính chiều rộng CSS.

Thay vào đó, tôi đang làm điều này: <table width="98%">

Có cách nào cũng để thiết lập một max-width mà không dựa vào CSS?

Answer 1

Vâng, có một cách để bắt chước max-width sử dụng một bảng, do đó cung cấp cho bạn cả bố cục đáp ứng và thân thiện với Outlook. Hơn nữa, giải pháp này không yêu cầu các bình luận có điều kiện.

Giả sử bạn muốn tương đương với một tâm là div với max-width trong số 350px. Bạn tạo một bảng, đặt chiều rộng là 100%. Bảng có ba ô liên tiếp. Đặt chiều rộng của trung tâm TD thành 350 (bằng cách sử dụng thuộc tính HTML width, không phải CSS), và ở đó bạn đi.

Nếu bạn muốn nội dung của mình được căn chỉnh trái thay vì căn giữa, chỉ cần bỏ trống ô đầu tiên.

Ví dụ:

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

Trong jsfiddle tôi cho bàn biên giới, do đó bạn có thể xem những gì đang xảy ra, nhưng rõ ràng là bạn sẽ không muốn một trong cuộc sống thực:

http://jsfiddle.net/YcwM7/

Answer 2

Câu trả lời ngắn gọn: không.

Câu trả lời dài:

Định dạng cố định hoạt động tốt hơn cho email HTML. Theo kinh nghiệm của tôi, tốt nhất bạn nên giả vờ là năm 1999 khi nói đến email HTML. Hãy rõ ràng và sử dụng các thuộc tính HTML (width = "650") khi có thể trong định nghĩa bảng của bạn, không phải CSS (style = "width: 650px"). Sử dụng chiều rộng cố định, không có tỷ lệ phần trăm. Chiều rộng bảng rộng 650 pixel là đặt cược an toàn. Sử dụng CSS nội tuyến để đặt thuộc tính văn bản.

Nó không phải là vấn đề của những gì hoạt động trong "email HTML", mà là rất nhiều khách hàng email và hạn chế (và đôi khi cố ý như vậy trong trường hợp Gmail, Hotmail, vv) khả năng hiển thị HTML.

Answer 3

Có một mẹo bạn có thể làm cho Outlook 2007 bằng cách sử dụng nhận xét html có điều kiện.
Mã bên dưới sẽ đảm bảo rằng bảng Outlook rộng 800px, chiều rộng không tối đa của nó nhưng nó hoạt động tốt hơn để cho phép khoảng bảng trên toàn bộ cửa sổ.

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

Answer 4

Bit trễ cho bữa tiệc, nhưng điều này sẽ hoàn thành. Tôi đã để lại ví dụ tại 600, vì đó là những gì hầu hết mọi người sẽ sử dụng:

Tương tự ví dụ của Shay ngoại trừ này cũng bao gồm tối đa chiều rộng để làm việc với những khách hàng còn lại có hỗ trợ, cũng như phương pháp thứ hai để ngăn chặn việc mở rộng (truy vấn phương tiện) cần thiết cho Outlook '11.

Trong đầu:

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

Trong cơ thể:

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

Dưới đây là một ví dụ về điều này trong sử dụng: Responsive order confirmation emails for mobile devices?

Answer 5

Đây là giải pháp phù hợp với tôi

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