如何使用 Sendgrid 在 Outlook 中呈现模板？

Question

I create a mail template with sendGrid for @hotmail.com account but when I test the email I don't have the same template as designed. This is what I did:

The result is:

My HTML code:

<td colspan="5" style="border-left: 20px solid pink;border-right: 20px pink solid ;padding : 0 30px; font-size:13px; padding-bottom : 20px">
    <div style="margin-top:20px; display : flex; font-size : 12px">
        <div style="background: pink; flex: 1; margin-right: 5px; width : 130px; height : 50px; text-align : center">
            <p style="margin : 0; margin-top : 10px">TEST</p>
            <p style="margin : 0">TEST</p>
        </div>
        <div style="width : 130px; height : 50px; text-align : center; background: pink; flex: 1; margin-right: 5px;">
            <p style="margin : 0; margin-top : 10px">TEST</p>
            <p style="margin : 0">TEST</p>
        </div>
        <div style="width : 240px; height : 50px; text-align : center; background: pink; flex: 2;line-height:50px;">
            TEST TEST TEST TEST TEST TEST TEST
        </div>
    </div>
</td>

Answer 1

Email software is quite backward. You'll find flex is not supported widely: https://www.caniemail.com/search/?s=flex

The basic structure of an email should still be (unfortunately) table-based using the default display (ie don't change it to flex). Look up 'hybrid email' approach for the table structure.

Furthermore, for long tables to display properly in mobiles, you'll need to keep in mind a rough 320 pixels maximum width, so the width:240px parameters are not great. Best to work in percentages, or re-work the table.