Outlook中HTML/CSS并排表格回复转发时布局错乱问题求助

我用Jinja2填充6个Pandas Dataframe生成HTML邮件报告，想要实现3行×2列的表格布局（每行两个表格并排），但在Outlook里回复/转发时格式全乱了：

• 列布局消失，表格变成垂直排列
• 每个表格自动占满整个宽度
  部分收件人收到邮件时也会出现这个问题。我怀疑是display:flex的问题，刚接触这个技术，请问怎么让表格在发送、回复/转发时都保持并排？

原HTML模板 #

<!DOCTYPE html>
<html>
<body>

<div class="row">
    <div class="column">
      <h2 class="title">{{contacts_left_title}}</h2>
        {{Contacts_monthly_mp}}
    </div>
    <div class="column">
      <h2 class="title">{{contacts_right_title}}</h2>
        {{Contacts_weekly_mp}}
    </div>
</div>

<br>
<div class="row">
    <div class="column">
        {{Contacts_monthly}}
    </div>
    <div class="column">
        {{Contacts_weekly}}
    </div>
</div>

<br>
<div class="row">
    <div class="column">
        {{Contacts_monthly_2}}
    </div>
    <div class="column">
        {{Contacts_weekly_2}}
    </div>
</div>

</body>
</html>

原样式代码 #

<style>
    body {
      font-family: Calibri;
      font-size: 12pt;
    }

    p {
      font-size: 11pt;
      padding-left: 12px;
      line-height: 1.5;
    }
    
    .Table_Style {
        border-collapse: collapse; 
        margin: 5px;
        margin-bottom: 20px;
        border: 1px solid;
    }
    
    .Table_Style td, th {
        padding: 4px;
        border: 1px solid silver; 
    }
    
    .Table_Style thead th {
        background-color: #4682B4; 
        color: #ffffff;
    }
    
    .Table_Style tbody th {
        width: 25%;
        text-align: left;
    }
    
    .Table_Style tbody td {
        width: 19%;
        text-align: center;
    }
    
    .Table_Style caption {
      font-size: 9pt;
      padding: 10px;
      font-style: bold;
      color: #666;
      text-align: right;
      letter-spacing: 1px;
    }
      

    .row {
      display: flex;
      margin-left: 5px;
    }
    
    .column {
      padding: auto;
      margin-left: 5px;
      margin-right: 15px;
    }  
    
    .column ul{
      font-size: 8pt;
      padding-left: 20px;
    }  
    
    .column h4{
      margin: 0;
      padding-left: 10px;
    }  

    .box, hr, .column, .row, .Table_Style, .Brand_Style {
        width: 100%;
    }
</style>

解决方案：用HTML表格代替Flex布局 #

Outlook桌面版的渲染引擎对CSS Flex支持极差，回复/转发时还会重置部分样式，必须用传统HTML表格实现多列布局，这是邮件开发的通用兼容方案。

修改要点： #

1. 替换所有.row和.column为HTML表格结构，每行用<tr>，每列用<td>
2. 给表格列设置width="50%"，确保两列均分宽度
3. 给<td>加valign="top"，让两列内容顶部对齐
4. 移除所有Flex相关CSS样式
5. 给全局表格加table-layout: fixed，保证布局稳定

修改后的完整代码 #

HTML模板

<!DOCTYPE html>
<html>
<body>

<!-- 第一行：两个表格并排 -->
<table width="100%" border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td width="50%" valign="top">
            <h2 class="title">{{contacts_left_title}}</h2>
            {{Contacts_monthly_mp}}
        </td>
        <td width="50%" valign="top">
            <h2 class="title">{{contacts_right_title}}</h2>
            {{Contacts_weekly_mp}}
        </td>
    </tr>
</table>

<br>

<!-- 第二行：两个表格并排 -->
<table width="100%" border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td width="50%" valign="top">
            {{Contacts_monthly}}
        </td>
        <td width="50%" valign="top">
            {{Contacts_weekly}}
        </td>
    </tr>
</table>

<br>

<!-- 第三行：两个表格并排 -->
<table width="100%" border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td width="50%" valign="top">
            {{Contacts_monthly_2}}
        </td>
        <td width="50%" valign="top">
            {{Contacts_weekly_2}}
        </td>
    </tr>
</table>

</body>
</html>

样式代码

<style>
    body {
      font-family: Calibri;
      font-size: 12pt;
      margin: 0;
      padding: 0;
    }

    p {
      font-size: 11pt;
      padding-left: 12px;
      line-height: 1.5;
    }
    
    .Table_Style {
        border-collapse: collapse; 
        margin: 5px 0 20px;
        border: 1px solid;
        width: 100%; /* 让表格占满所在列宽度 */
    }
    
    .Table_Style td, th {
        padding: 4px;
        border: 1px solid silver; 
    }
    
    .Table_Style thead th {
        background-color: #4682B4; 
        color: #ffffff;
    }
    
    .Table_Style tbody th {
        width: 25%;
        text-align: left;
    }
    
    .Table_Style tbody td {
        width: 19%;
        text-align: center;
    }
    
    .Table_Style caption {
      font-size: 9pt;
      padding: 10px;
      font-weight: bold; /* 修正原代码错误：font-style不控制加粗 */
      color: #666;
      text-align: right;
      letter-spacing: 1px;
    }

    /* 邮件表格布局基础样式 */
    table {
        table-layout: fixed; /* 强制按设定宽度渲染，防止布局错乱 */
        border-collapse: collapse;
    }
</style>

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