Outlook中表格宽度设置不生效问题求助

Hey there, I’ve dealt with this exact Outlook table width headache so many times—let’s get this sorted for you!

The core issue here is that desktop Outlook (especially Windows versions using the Word rendering engine) ignores modern CSS percentage widths and class-based sizing. It prioritizes hard-coded pixel values in HTML width attributes, which is why your 90% width works everywhere else but fails here.

Here’s the Step-by-Step Fix: #

We’ll use Outlook-specific conditional comments to target the problematic client, while keeping your existing setup for all other email clients.

1. Calculate the equivalent pixel width: First, figure out the base width of your email’s outer container (e.g., if your full-width container is 700px, 90% of that is 630px). Use this pixel value for Outlook.
2. Wrap your table in conditional comments: Split your table declaration into two parts—one for Outlook, one for everyone else.

Modified Code Snippet:

<!--[if mso]>
<!-- Outlook-only table with hard-coded pixel width -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="630">
<![endif]-->
<!--[if !mso]><!-->
<!-- All other clients: keep your 90% width and deviceWidth class -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" width="90%">
<!--<![endif]-->
  <!-- Your content between the image header and footer goes here -->
</table>

Key Explanations: #

• The <!--[if mso]> comment is only parsed by Outlook (Microsoft Office Outlook). Inside it, we set a fixed pixel width that matches your desired 90% ratio.
• Non-Outlook clients will skip the Outlook block and use the lower table with width="90%" and your deviceWidth class, maintaining the responsive/percent-based sizing you want.
• For extra safety, ensure your deviceWidth class includes explicit width rules for non-Outlook clients:

.deviceWidth {
  width: 90% !important;
  max-width: 90%;
}

Bonus Tips for Email Success: #

• Never rely solely on CSS for table widths in Outlook—always pair it with an HTML width attribute (pixel values for Outlook, percentages for others).
• If your email is responsive, use media queries to adjust widths on mobile; Outlook mobile (iOS/Android) handles percentages much better than desktop Outlook.
• Test with email preview tools to check Outlook’s rendering without sending test emails repeatedly.

This setup will make your table shrink to 90% width consistently across all clients, matching the behavior you wanted.

内容的提问来源于stack exchange，提问作者Jacob West