'Outlook table border positioning

Trying out Mjml and ran into this problem where I am not able to place the border border exactly where it needs to be for my table to work. It is a bit DYI but it is the only way I have made it work so far with Outlook. My question is that can I somehow control the exact positioning of the border so I can align it perfectly to the image?

I will post my code below in MJML:

This is where I am able to get to this: image of the problem

Outlook version, god help me here: Outlook Html 

  <mj-wrapper>
   <mj-section background-color="#fff">
      <mj-column>
        <mj-table>
          <tr>
            <td style="padding:0px 0px 0px 0px;">
            <img src="./img/[email protected]" alt="couple-img" />
            </td>
          </tr>

          <tr style="border-left: 2px solid #702b7e;">

           <td align="center" style="padding:0px 40px 0px 40px;">
               <span style="font-family:Arial-BoldMT;font-size:18px;color:#702b7e;"> LE TÉMOIGNAGE </span> <br /> <br />
               <span style="font-family:Arial-BoldMT;font-size:16px;color:#6f6f6f;">Je vous présente Laure et Mathieu ! </span> <br />
               <span style="font-size:15px;color:#6f6f6f;">Ils viennent d’acheter un tout nouveau chauffe-eau thermodynamique et nous racontent comment il change leur vie, surtout à l’heure du bain avec leur trois enfants ! 
               Et en plus d’être plus écologique, il se révèle plus économique… mais je vais les laisser vous en parler
               </span> <br /> <br />
                <button style="border: 0;padding:18px;background-color:#7a2182;color:white;border-radius:26px;font-size:14px;">
                DÉCOUVRIR TOUS LES BÉNÉFICES
                </button>
           </td>
           <td>
           
           </td>
           <td align="center">
           </td>
           <td>
           </td>           
          </tr>
          <tr>
            <td>
            <img src="./img/[email protected]" alt="" />
            </td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
     </mj-wrapper>
htmlcssoutlookbordermjml


Solution 1:[1]

The fact is that Outlook uses Word for rendering message bodies. For example, the span element supports a smaller subset of Word–supported cascading style sheets, defined by the term CORE. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eugene Astafiev

Related Questions