my problem is that after sending template mail/ saving template in chrome e.g. to myself, when I opens it, it looks good, but after a few seconds it looks like it is loosing some css (in this particular case it is loosing borders in bottom table).
Here is the code, it was written in MJML
What is weird, if i send this template not through gmail it looks good even in gmail
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
}
.mj-column-px-300 {
width: 300px !important;
}
.mj-column-per-50 {
width: 50% !important;
}
}
</style>
<style type="text/css">
</style>
</head>
<body>
<div>
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:verdana;font-size:20px;line-height:1;text-align:center;color:black;">
Tytul
</div>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Desktop</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Mobile</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Rate card:</td>
<td style="padding: 5px;">RC here</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px; ">Budget:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Optimization:</td>
<td style="padding: 5px;">text</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px;">Banners:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
