强制电子邮件客户端应用程序不删除 table 边框

Question

我在 Android 和 iOS 上尝试让某些邮件客户端应用程序显示边框时遇到问题。边框在 Web 浏览器和 ThunderBird 或 Outlook 等桌面客户端上正确显示。

Yahoo 删除强制内联样式后 Android 的实际结果。

iOS Gmail 的实际结果，这次删除了强制内联样式。

MJML代码：

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

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

Answer 1

一些电子邮件客户端不喜欢特定的格式，例如 !important，并且会删除整个样式部分（如果存在）。

此外，最好对颜色使用 HEX 格式（即 #000000 而不是 'black'），尽管我认为所有电子邮件客户端都知道黑色是什么，但许多人对其他颜色的解释不一致（并且来自内存 Windows 10 应用程序不喜欢 rgb 格式。

强制电子邮件客户端应用程序不删除 table 边框

Force email client apps to not remove table borders

email

mailing

html-email

mjml