Gmail Android "munches" your emails... sometimes.

If you are a fan of RNG (=random factor for newbies), you won't be disappointed. You like to see your code behave differently depending on the content and not on the HTML code itself? Then this article is for you (and if you like really I advise you to consult...)!

Once upon a time...

Recently, I embedded an email with this type of block:

I had to decline different versions of this email with slightly different content. But neither the content nor the code of the block in question has changed between the different versions.
So, what was not my surprise when I launched the tests to find, for some versions an identical rendering and for others the following rendering for Gmail on Android :

WTF?!

My first reaction was to try to debug the schmilblick by deleting bits of code thinking that there must be a badly closed tag or a quotation mark lying around that would cause problems.
Fortunately, I don't have any more hair to pull out, because it is in fact a problem that appears "randomly". Or in any case, according to the goodwill of a script from Google, which is, as far as we know, the same thing.

Fortunately for me, other integrators have already been confronted with this evil script (I am sure that it was created by a perverse mind with the sole purpose of driving integrators crazy) like Stefano Bagnara who details all this in an article (in English)

So, what's going on, my good lady?

In summary, the script will apply the following CSS code:

table.munged {
     width: auto !important;
     table-layout: auto !important;
     }
 td.munged {
     width: auto !important;
     white-space: normal !important;
     }

And go " scanner "I put quotation marks on it because the exact operation remains a bit obscure. After this " scan"The script will decide whether or not the rendering is suitable. If yes, your email will be polluted, if no, your email will be (more or less) intact.

What to do if this happens to you?
Don't be afraid good people. A solution exists: it is about adding to your table a CSS property min-width.
For example, your table will look like this:

<table style="width:100%; min-width: 100%;" cellpadding="0" cellspacing="0" border="0">

And in my case, O magic:

Apparently, this script only runs on Android leaving Apple devices alone (for the moment...).
As Mark Robbins suggests, Google's idea is probably to make email as fluid as possible to make it easier to read on mobile.
If in theory it is a good idea, in practice we are far from the expected result.