Search code examples
emailhtml-emailmailingmjml

Force email client apps to not remove table borders

I'm having trouble trying to get borders visible on certain mail client apps on Android and iOS. Borders are displayed corerctly on web browsers and Desktop clients like ThunderBird or Outlook.

Actual result on Android with Yahoo removing forcered inline styles. enter image description here

Actual result on iOS with Gmail this time removing forcered inline styles. enter image description here

MJML code:

<mjml>
  <mj-head>
    <mj-style>
      .foo-title { margin-bottom: 0; white-space: nowrap; } .foo-sub-title { color: rgba(0,0,0,.8); margin-top: 0; font-size: 14px; margin-bottom: 0; white-space: nowrap; font-size: 14px; }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column width="100%">
        <mj-table css-class="foo" border="none" cellpadding="0" cellpadding="0">
          <tr>
            <td colspan="2" style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title" style="font-size: 35px;">0Z00</p>
              <p class="foo-sub-title" style="padding-top:5px">Localizador</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">29/03</p>
              <p class="foo-sub-title">2021</p>
            </td>
          </tr>
          <tr>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">TEE 00</p>
              <p class="foo-sub-title">Salida</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">00:00</p>
              <p class="foo-sub-title">Hora</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">1</p>
              <p class="foo-sub-title">Jugadores</p>
            </td>
          </tr>
          <tr>
            <td colspan="3" style="border: 3px solid black !important;padding: 5px 15px;">
              <p style="font-size: 16px;">Green fees 9 hoyos</p>
            </td>
          </tr>
          <tr>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">0,00€</p>
              <p class="foo-sub-title">Total</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">0,00€</p>
              <p class="foo-sub-title">Pago realizado</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">0,00€ *</p>
              <p class="refooserva-sub-title">Pago pendiente</p>
            </td>
          </tr>
          <tr>
            <td colspan="3" style="border: none !important; padding: 15px;"></td>
          </tr>
          <tr>
            <td style="border-bottom: 3px solid black !important; border-left: 3px solid black !important; border-right: 3px solid black !important; border-top: none !important; padding-bottom: 0; padding-top: 15px; padding-left: 15px; padding-right: 15px; font-size: 14px;" colspan="3">
              <p style="pading-top:0; margin-top: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

Generated HTML

<table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;">
    <tr>
        <td colspan="2" style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title" style="font-size: 35px;">0Z00</p>
            <p class="foo-sub-title" style="padding-top:5px">Localizador</p>
        </td>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">29/03</p>
            <p class="foo-sub-title">2021</p>
        </td>
    </tr>
    <tr>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">TEE 00</p>
            <p class="foo-sub-title">Salida</p>
        </td>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">00:00</p>
            <p class="foo-sub-title">Hora</p>
        </td>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">1</p>
            <p class="foo-sub-title">Jugadores</p>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="border: 3px solid black !important;padding: 5px 15px;">
            <p style="font-size: 16px;">Green fees 9 hoyos</p>
        </td>
    </tr>
    <tr>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">0,00€</p>
            <p class="foo-sub-title">Total</p>
        </td>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">0,00€</p>
            <p class="foo-sub-title">Pago realizado</p>
        </td>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">0,00€ *</p>
            <p class="refooserva-sub-title">Pago pendiente</p>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="border: none !important; padding: 15px;"></td>
    </tr>
    <tr>
        <td style="border-bottom: 3px solid black !important; border-left: 3px solid black !important; border-right: 3px solid black !important; border-top: none !important; padding-bottom: 0; padding-top: 15px; padding-left: 15px; padding-right: 15px; font-size: 14px;" colspan="3">
            <p style="pading-top:0; margin-top: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </td>
    </tr>
</table>
Solution

  • Some email clients don't like particular formatting such as !important, and will remove the whole style section if that is present.

    Also it's always best to use HEX format for colours (i.e. #000000 not 'black'), though I think all email clients know what black is, but many interpret other colours inconsistently (and from memory Windows 10 App doesn't like rgb format).