Here’s a fix for when HTML emails sent to Google Mail accounts entirely omit some table cells during rendering. If you’re like me, you were probably tearing your hair out since your HTML/CSS is 100% valid. The table cells are there — they’re just collapsed and need to be forced to show. It’s a strange fix, so the explanation below is a little lengthy. Bear with me…
Example in Gmail:
Example in Outlook:
In gmail, the table cells are collapsed around the text. In Outlook (or Apple Mail, or any other clients really) this is not the case.
When this happens:
It occurs only with table cells that contain no content, or text content that does not fill the entire height of the cell. This is why these top and bottom titlebar cells have disappeared, and the center cell (with the title text) contains less vertical space than expected.
Why this happens:
Gmail will collapse table cells with empty space defined only with height. In this case, we have three cells: the top, middle, bottom. The middle contains text, so it has content, but it is still collapsed around the text. The top and bottom have no content and are completely collapsed as a result.
When Gmail does this, it actually changes the code, so it’s nothing caused by the HTML currently in the template. height is changed to max-height, meaning our 10px height becomes a max-height, and thus is actually 0px (since there is no min-height or height to set a low-end).
Proposed fix:
For these collapsed cells, we can trick gmail into displaying them by using line-height. However line-height will *only* work for them if the cells are given content. A single space works fine here. The space forces the table cells to remain non-collapsed, and the line-height attribute defines how much many vertical pixels to associate with the space. Admittedly, this is awkward, but this is basically a hack in the first place.