适配Outlook 2016的纯HTML垂直堆叠条形图问题求助

I’ve tackled this exact Outlook quirk before—those auto-inserted <p> tags are such a headache when forwarding formatted emails. Here are two solid solutions that fit your constraints:

Solution 1: Neutralize Outlook’s Auto-Inserted <p> Tags #

Outlook inserts <p> tags around block-level content when forwarding, and these tags come with default margins that wreck your layout. We can fix this in two ways:

1.1 Force <p> Tags to Have Zero Spacing #

Add this style block to your <head> section to override Outlook’s default <p> styles. The conditional comment ensures it only applies to MSO (Outlook) clients:

<head>
  <style>
    /* For modern clients */
    p { margin: 0 !important; padding: 0 !important; }
    
    <!--[if mso]>
    <style>
      /* Target Outlook specifically */
      p { margin: 0; padding: 0; line-height: 0; }
      table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; }
    </style>
    <![endif]-->
  </style>
</head>

1.2 Remove Unnecessary Block-Level Elements #

In your original code, you’re wrapping tables in <p> tags—this gives Outlook an excuse to add more <p>s during forwarding. Replace those inner <p> tags with <span> (inline element) or remove them entirely. For example, change:

<td style="height:50px;background-color:red;">
  <p>1</p>
</td>

To:

<td style="height:50px;background-color:red; text-align:center;">
  <span>1</span>
</td>

Or even just place the text directly in the <td> since it’s already a block container in Outlook.

Solution 2: Simplified Table-Based Implementation (No Risk of <p> Insertion) #

Redesign your chart to use a cleaner table hierarchy that minimizes Outlook’s urge to inject extra tags. This approach uses nested tables for each stacked bar, with no extra block-level elements:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
  <style>
    <!--[if mso]>
    table { border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
    td { padding: 0; margin: 0; }
    <![endif]-->
  </style>
</head>
<body>
  <!-- Main container table -->
  <table style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tr>
      <!-- First stacked bar -->
      <td style="padding: 0 10px; margin: 0;">
        <table style="width:40px; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
          <tr>
            <td style="height:50px; background-color:red; text-align:center; color:white;">1</td>
          </tr>
          <tr>
            <td style="height:10px; background-color:green; text-align:center; color:white;">1</td>
          </tr>
        </table>
      </td>
      <!-- Second stacked bar -->
      <td style="padding: 0 10px; margin: 0;">
        <table style="width:40px; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
          <tr>
            <td style="height:50px; background-color:red; text-align:center; color:white;">1</td>
          </tr>
          <tr>
            <td style="height:10px; background-color:green; text-align:center; color:white;">1</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

Why This Works: #

• All content is contained within <table> and <td> elements, which Outlook treats as native email components (less likely to wrap in <p> tags).
• The mso-table-lspace and mso-table-rspace attributes eliminate unwanted spacing between tables.
• Inline styles ensure consistency across all Outlook versions, with conditional styles adding extra MSO-specific safeguards.

内容的提问来源于stack exchange，提问作者Huw Bristow