Có tương đương với CSS max-width hoạt động trong email HTML không?

Tôi đang cố gắng tạo một email HTML sẽ hiển thị chính xác trong tất cả các ứng dụng email được sử dụng rộng rãi. Tôi gói toàn bộ email trong một bảng và tôi muốn nó có chiều rộng bằng 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ì theo Outlook 2007 này 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 đặt chiều rộng tối đa mà không cần dựa vào CSS không?

Có, có một cách để mô phỏng max-widthbằng cách sử dụng 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 nhận xét có điều kiện.

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

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

Thí 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 cung cấp cho bảng một đường viền để bạn có thể thấy những gì đang xảy ra, nhưng rõ ràng là bạn sẽ không muốn có một đường viền trong cuộc sống thực:

http://jsfiddle.net/YcwM7/

Có một thủ thuật bạn có thể thực hiện cho Outlook 2007 bằng cách sử dụng các nhận xét html có điều kiện.
Đoạn mã dưới đây sẽ đảm bảo rằng bảng Outlook có chiều rộng 800px, không phải chiều rộng tối đa nhưng nó hoạt động tốt hơn so với việc để bảng kéo dài 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>

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

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

Các định dạng cố định hoạt động tốt hơn cho các 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") nếu 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à một đặt cược an toàn. Sử dụng CSS nội tuyến để đặt thuộc tính văn bản.

Vấn đề không phải là những gì hoạt động trong "email HTML", mà là sự đa dạng của các ứng dụng email và khả năng hiển thị HTML của họ bị hạn chế (và đôi khi cố tình như vậy trong trường hợp của Gmail, Hotmail, v.v.).

Đến bữa tiệc hơi muộn, nhưng điều này sẽ hoàn thành. Tôi để ví dụ ở mức 600, vì đó là những gì hầu hết mọi người sẽ sử dụng:

Tương tự như ví dụ của Shay ngoại trừ điều này cũng bao gồm chiều rộng tối đa để hoạt động trên phần còn lại của các máy khách có hỗ trợ, cũng như phương pháp thứ hai để ngăn việc mở rộng (truy vấn phương tiện) cần 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]-->

Đây là một ví dụ khác về điều này đang được sử dụng: Email xác nhận đơn hàng đáp ứng cho thiết bị di động?

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

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , cảm ơn @ 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>