如何为MJML邮件模板中的表格添加横向滚动效果？

邮件客户端对CSS属性的支持有限，但主流客户端（如Gmail网页版、Apple Mail、Outlook网页版）已支持overflow-x属性，可通过以下方式实现表格在蓝色容器内的横向滚动：

核心实现思路 #

1. 给包裹表格的外层容器添加overflow-x: auto样式，触发横向滚动
2. 强制表格内容不换行，保持表头完整宽度
3. 让表格根据内容自适应宽度，避免被强制压缩

修改后的MJML代码示例 #

<mjml>
  <mj-body>
    <!-- 蓝色滚动容器 -->
    <mj-section css-class="scroll-container">
      <mj-column>
        <mj-table css-class="scroll-table">
          <tr>
            <th>非常长的表头名称1</th>
            <th>非常长的表头名称2</th>
            <th>非常长的表头名称3</th>
            <th>非常长的表头名称4</th>
            <th>非常长的表头名称5</th>
          </tr>
          <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
            <td>内容4</td>
            <td>内容5</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>

    <!-- 自定义样式 -->
    <mj-style>
      .scroll-container {
        overflow-x: auto !important;
        background-color: #4285F4 !important;
        max-width: 100% !important;
        padding: 10px !important;
      }
      .scroll-table {
        table-layout: auto !important;
        white-space: nowrap !important;
        width: auto !important;
        border-collapse: collapse !important;
      }
      .scroll-table th, .scroll-table td {
        padding: 8px 12px !important;
        border: 1px solid #ddd !important;
      }
    </mj-style>
  </mj-body>
</mjml>

关键样式说明 #

• overflow-x: auto !important：强制容器在内容超出宽度时显示横向滚动条，!important用于覆盖MJML默认样式
• white-space: nowrap !important：防止表头和单元格内容换行，保持完整宽度
• table-layout: auto：让表格根据内容自动计算宽度，避免被强制压缩至容器宽度
• 给容器添加内边距，优化表格与容器边缘的视觉距离

兼容性提示 #

部分老旧邮件客户端（如Outlook桌面版）可能不支持overflow属性，此时表格会自动换行或超出容器，但主流客户端均可正常显示滚动效果。

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