Outlook fluid table fixed

website_mail_snippet_responsive/views/snippet_1_col.xml

@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_1_col'"/>
             <t t-set="title">Big image + Text + Button (1 column)</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td><a href="#" target="_blank"><img src="http://placehold.it/570x200/333333/ffffff?text=width 570px" style="display: block; color: #000000;  font-family: Arial, sans-serif; font-size: 9pt; width: 100%; max-width: 570px; min-width:285px;" border="0"/> </a></td>
                 </tr>

website_mail_snippet_responsive/views/snippet_2_cols.xml

@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_2_cols'"/>
             <t t-set="title">Image + Text + Button (2 columns)</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->
@@ -66,7 +63,7 @@
                               </tr>
                            </tbody>
                          </table>
-                         
+
                         <!-- RIGHT COLUMN -->
                         <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 50%;  min-width:285px;">
                               <tbody>

website_mail_snippet_responsive/views/snippet_3_cols.xml

@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_3_cols'"/>
             <t t-set="title">Image + Text + Button (3 columns)</t>
                <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <!-- FIRST COLUMN -->
                     <td style="padding: 0;" valign="top">
@@ -66,9 +63,9 @@
                             </tr>
                         </tbody>
                     </table>
-        
+
                     <!-- SECOND COLUMN -->
-        
+
                   <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 32%; min-width:182px;">
                         <tbody>
                             <tr>
@@ -117,9 +114,9 @@
                             </tr>
                         </tbody>
                     </table>
-        
+
                     <!-- THIRD COLUMN -->
-        
+
                     <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 32%; min-width:182px;">
                         <tbody>
                             <tr>

website_mail_snippet_responsive/views/snippet_event_date.xml

@@ -11,10 +11,7 @@
         <t t-call="website_mail_snippet_responsive.snippet">
             <t t-set="image" t-value="'snippet_event_date'"/>
             <t t-set="title">Date + Text + Button (2 columns)</t>
-                        <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
+              <tbody>
                 <tr>
                     <td style="padding:0 20px;">
                     <table border="0" cellpadding="0" cellspacing="0" width="100%">
@@ -51,28 +48,28 @@
                                             </table>
                                             </td>
                                         </tr>
-                                        
+
                                     </tbody>
                                 </table>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
-        
+
                     <!-- RIGHT COLUMN -->
-        
+
                     <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 50%;  min-width:285px;">
                         <tbody>
                             <tr>
                                 <td style="padding: 20px 0 20px 20px;">
                                 <table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background:inherit;color:inherit; background:#FFFFFF">
                                     <tbody>
-                                        
+
                                         <tr>
                                             <td style="padding:0;">
                                             <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                 <tbody>
-                                                    
+
                                                     <tr>
                                                         <td align="left" style="padding: 0 0 0 0; font-size: 9pt; line-height: 20px; font-family: Arial, sans-serif; color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum.</td>
                                                     </tr>

website_mail_snippet_responsive/views/snippet_hr.xml

@@ -24,9 +24,6 @@
             <t t-set="image" t-value="'snippet_hr'"/>
             <t t-set="title">Horizontal Separator</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"/>
-                </tr>
                 <tr>
                     <td bgcolor="#00B518"
                         height="5"

website_mail_snippet_responsive/views/snippet_img_text.xml

@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_img_text'"/>
             <t t-set="title">Left Image, Right Text + Button</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->

website_mail_snippet_responsive/views/snippet_text_img.xml

@@ -12,9 +12,6 @@
             <t t-set="image" t-value="'snippet_text_img'"/>
             <t t-set="title">Left Text and Button, Right Image</t>
             <tbody>
-                <tr>
-                    <td bgcolor="#ECECEC" height="10"></td>
-                </tr>
                 <tr>
                     <td style="padding: 0;" valign="top">
                         <!-- LEFT COLUMN -->

website_mail_snippet_responsive/views/templates.xml

@@ -18,13 +18,26 @@
         <div
             class="oe_snippet_body"
             style="padding:0px; width:100%; background-color:#ececec; color:rgb(0,0,0); line-height:20px; font-family:Arial,sans-serif; font-size:9pt">
-            <table
-                style="width: 100%; max-width: 570px; border-collapse: collapse; background: inherit; color: inherit; background: #FFFFFF"
-                cellpadding="0"
-                cellspacing="0"
-                align="center"
-                bgcolor="#FFFFFF">
-                <t t-raw="0"/>
+            <!--[if gte mso]>
+                <style type="text/css">
+                .fluid { width: 600px !important; }
+                </style>
+            <![endif]-->
+            <table class="fluid" align="center" cellpadding="0" cellspacing="0" style="max-width: 600px; border-collapse: collapse; background: inherit; color: inherit;">
+                <tbody>
+                    <tr>
+                        <td class="bg_color_picker" style="background-color:#ececec; padding:10px 15px 0 15px;">
+                            <table
+                                style="width: 100%; max-width: 570px; border-collapse: collapse; background: inherit; color: inherit; background: #FFFFFF"
+                                cellpadding="0"
+                                cellspacing="0"
+                                align="center"
+                                bgcolor="#FFFFFF">
+                                <t t-raw="0"/>
+                            </table>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
         </div>
     </div>