HTML邮件表格样式在Gmail与Apple Mail中不生效求助

Hey there! HTML email styling can be a total headache with all those client quirks—Gmail and Apple Mail are two of the trickiest ones. Let’s break down why your table styles aren’t working and fix them step by step.

Key Reasons Your Styles Aren’t Applying #

1. Gmail filters non-inline CSS: Gmail strips out most embedded or external styles, and even ignores some old table attributes like cellpadding/cellspacing in favor of inline styles.
2. Table-level padding isn’t supported: Most email clients (including Gmail and Apple Mail) don’t recognize padding directly on the <table> element—you need to apply padding to individual <td>s instead.
3. Apple Mail’s WebKit quirks: While it supports more CSS than Gmail, it can conflict with outdated table attributes if they aren’t paired with modern inline styles like border-collapse.

Step-by-Step Fixes #

Let’s adjust your table code to work across both clients:

1. Replace table attributes with inline styles
   Ditch the old cellspacing="0" cellpadding="0" attributes and use inline CSS for better compatibility. Add border-collapse: collapse; border-spacing: 0; to eliminate unwanted spacing between cells.

2. Move table padding to individual <td>s
   Since <table> padding doesn’t work in most clients, apply your 25px spacing directly to the empty <td> using width and padding (or just padding if you don’t need a fixed width).

3. Lock table width for Gmail
   Add table-layout: fixed; to prevent Gmail from auto-resizing your table on mobile or web, ensuring your layout stays consistent.

Modified Code Example #

Here’s how your table should look after adjustments:

<table id="txn-info-container" style="width: 100%; border-collapse: collapse; border-spacing: 0; border: 0; table-layout: fixed;" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- Replace the empty spacing td with this -->
    <td style="width: 25px; padding: 0; margin: 0;"></td>
    <!-- Add your other table cells here, with inline styles for padding/borders -->
  </tr>
</table>

Additional Best Practices for HTML Emails #

• Always use inline styles: Gmail ignores almost all <style> tag content, so every style needs to be directly applied to the element.
• Stick to table layouts: Divs can break in strict clients like Gmail, so tables are the safest bet for email structure.
• Test with real accounts: Use actual Gmail and Apple Mail accounts to validate your design—tools help, but real-world testing is unbeatable.
• Add a viewport meta tag: Include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your email’s <head> to improve mobile scaling in Apple Mail.

内容的提问来源于stack exchange，提问作者An User