HTML 电子邮件：移动设备上的表格溢出？

Question

我创建了一个 HTML 电子邮件，使用 HandlebarsJS 作为占位符。

它在所有 desktop 客户端上呈现良好，但在 Mobile 上，表格溢出到页面的右侧（请参见下面的示例），请注意，内联 CSS 是在 Gmail 上呈现所必需的。

如何确保表格在移动设备和桌面设备上居中？

表格代码：

<div class="table" style="font-family: arial,helvetica,sans-serif;font-size: 14px;">
  <table id="carTable" role="presentation" cellspacing="0" cellpadding="0" border="0" width="504" style="border-collapse: collapse;border: solid 1px #cccccc;">
    <tbody>
      <tr style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;">
        <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Car Number</th>
        <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Group</th>
        <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Risk</th>
        <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Cost</th>
        <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Result</th>
      </tr>
      <!-- {{#each parts}} -->
      <tr style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;">
        <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{number}}</td>
        <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{group}}</td>
        <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{risk}}</td>
        <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{cost}}</td>
        <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{result}}</td>
      </tr>
      <!--{{/each}} -->
    </tbody>
  </table>
</div>

Answer 1

您将表格设置为“504”的固定宽度，转换为“504px”。如果您希望它在移动设备上响应，请尝试将其设置为“100%”，如下所示：

<div class="table" style="font-family: arial,helvetica,sans-serif;font-size: 14px;">
    <table id="carTable" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse;border: solid 1px #cccccc;">
        <tbody>
        <tr style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;">
            <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Car Number</th>
            <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Group</th>
            <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Risk</th>
            <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Cost</th>
            <th style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #DFDFDF;text-align: left;">Result</th>
        </tr>
        <!-- {{#each parts}} -->
        <tr style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;">
            <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{number}}</td>
            <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{group}}</td>
            <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{risk}}</td>
            <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{cost}}</td>
            <td style="padding: 10px;font-family: Arial;font-size: 13px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #333333;height: 30px;transition: all 0.3s;background: #FAFAFA;text-align: left;">{{result}}</td>
        </tr>
        <!--{{/each}} -->
        </tbody>
    </table>
</div>

我强烈建议您使用一个框架来构建您的电子邮件模板，例如 MJML 或 Foundation for Email，因为这将使您在针对不同的电子邮件客户端和制作响应式电子邮件时的生活变得更加轻松。