While experimenting with Mjml, I encountered an issue where I struggled to place the border exactly where it needed to be in order for my table to function correctly. It was a bit of a do-it-yourself solution, but it was the only way I managed to make it work with Outlook so far. My question is, can I somehow control the precise positioning of the border so that I can align it perfectly with the image?
Below is the code snippet in MJML that I've been working with:
This is what I have achieved so far: image of the problem
The dreaded Outlook version: Outlook Html
<mj-wrapper>
<mj-section background-color="#fff">
<mj-column>
<mj-table>
<tr>
<td style="padding:0px 0px 0px 0px;">
<img src="./img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b030a1e1f2b5913451b05">[email protected]</a>" 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9c8ebdcf85d93">[email protected]</a>" alt="" />
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mj-wrapper>