Search code examples
htmlcssemailhtml-tablegmail

HTML Email : Table overflows on Mobile?

I have created an HTML email using HandlebarsJS for placeholders.

It renders fine on all desktop clients, however on Mobile the table spills out over onto the right hand side of page (see example below), note that inline CSS is necessary to render on Gmail.

enter image description here

How can I ensure the table is centered on Mobile as well as on desktop?

Table code:

<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>

Solution

  • You are setting your table to a fixed width of "504" which translates to "504px". If you want it to be responsive on mobile, then try setting it to "100%" like this:

    <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>

    I would highly suggest you use a framework for building your email templates such as MJML or Foundation for Email as this will make your life a lot easier when targeting different email clients and making responsive emails.