Force email client apps to not remove table borders

Question

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.

Actual result on iOS with Gmail this time removing forcered inline styles.

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>

Try the following things: remove the !important's, and, change 'black' to #000000 — Nathan, May 19 '21 at 05:58
You're right @Nathan https://i.imgur.com/81DWu7R.jpg this fixes the issue. I just have to get rid of that double border now. Thanks. — Qu4k3, May 19 '21 at 07:23

score 1 · Accepted Answer · answered May 19 '21 at 22:52

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

Force email client apps to not remove table borders

1 Answers1