HTML 电子邮件：Table 在手机上溢出？

Question

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

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

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

Table代码：

<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

您正在将 table 设置为固定宽度“504”，即“504 像素”。如果您希望它在移动设备上响应，请尝试将其设置为“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 or Foundation for Email，因为这将使您在针对不同的电子邮件客户端和制作响应式电子邮件时更加轻松。

HTML 电子邮件：Table 在手机上溢出？

HTML Email : Table overflows on Mobile?

html

css

email

gmail

html-table