I'm trying to send an e-mail containing HTML content. Gmail and Yahoo has a limit of approximately 102kB .The e-mail clients clip/crop the e-mail if the content of the e-mail is above 102kB. However, they provide a link to open the full e-mail whose content is above 102kB.

I'm trying to understand how this clipping happens as random clipping is problematic for my use-case. The e-mail when clipped looks very ugly and irregular.
I'm looking for a solution using which I can write the HTML in such a way that even if the e-mail gets clipped, the content doesn't look inconsistent.

Below is a screenshot of an e-mail which got clipped by Gmail:

Email getting clipped by Gmail

<td valign="top">
As you can see that the above tag is visible in the email. This is unexpected and I want to remove all such irregularities.

Can someone please suggest a method by which I can make the e-mail consistent even if it gets cropped/clipped?

Note : This question is for scenarios where the size is definitely more than 102kB and the e-mail will surely get clipped.

URL for the image :

Google Drive : https://drive.google.com/open?id=1RGV61AJypaA_Dx9PN7Z2KHSEtfR6WLQM

JSFiddle : https://jsfiddle.net/y5d3ncu2/