CODEWITHSUNDEEP
outlookhtml-emaillitmus
superfive33
superfive33

Reputation: 1164

Why do my table width is broken on Outlook

I'm doing some tests of HTML emails in Outlook. Here's my code:

<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TEST</title>
</head>
<body style="margin: 0; padding: 0;">
    
<table align="center" cellpadding="0" cellspacing="0" width="100%" border="0" bgcolor="#C7C7C7" style="margin: 0; padding: 0;">
    <tbody><tr><td valign="top">
        
        <table cellpadding="0" cellspacing="0" width="100%" border="0" style="margin: 0; padding: 0;">
            <tbody><tr><td valign="top" align="center" style="padding: 0px;">
                <table cellpadding="0" cellspacing="0" border="0" align="center" width="600" style="padding: 0; margin: 0px auto; width: 600px;">
                    <tbody><tr><td valign="top" style="padding: 0px;">
                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="padding: 0; margin: 0px auto;">
                            <tbody><tr><th valign="top" style="box-sizing: border-box; font-weight: normal; background: none; padding: 0; padding-left: 0px; padding-right: 0px; height: 100%; width: 100%;">
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"  style="margin: 0; padding: 0;">
                                    <tbody><tr><td valign="top" style="text-align: left; font-weight: normal; padding: 0px;">
                                        <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin: 0; padding: 0;">
                                            <tbody><tr><td valign="top"  style="background-color: #ffffff; padding: 20px; text-align: left;">
                                                <p style="padding: 0; margin: 0; word-break: break-word; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; mso-line-height-rule: exactly;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus tincidunt mi sit amet aliquam. Nulla sollicitudin nisl vitae lacus eleifend, et volutpat dolor rutrum. Etiam porttitor, nunc et suscipit malesuada, ipsum elit semper ipsum, ultricies accumsan orci magna ac magna.</p>
                                            </td></tr></tbody>
                                    </table>
                                    </td></tr></tbody>
                            </table>
                            </th></tr></tbody>
                    </table>
                    </td></tr></tbody>
            </table>
            </td></tr></tbody>
        </table>


        <table cellpadding="0" cellspacing="0" width="100%" border="0" style="margin: 0; padding: 0;">
            <tbody><tr><td valign="top" align="center" style="padding: 0px;">
                <table cellpadding="0" cellspacing="0" border="0" align="center" width="600" style="padding: 0; margin: 0px auto; width: 600px;">
                    <tbody><tr><td valign="top" style="background-color: #efefef;padding:20px;">
                        <p style="padding: 0; margin: 0; word-break: break-word; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; mso-line-height-rule: exactly;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus tincidunt mi sit amet aliquam. Nulla sollicitudin nisl vitae lacus eleifend, et volutpat dolor rutrum. Etiam porttitor, nunc et suscipit malesuada, ipsum elit semper ipsum, ultricies accumsan orci magna ac magna.</p>
                    </td></tr></tbody>
                </table>
            </td></tr></tbody>
        </table>    
    
    </td></tr></tbody>
</table>    
</body>
</html>

In the browser (inside Litmus), it displays like this:

enter image description here

In Outlook, the second section is broken: the width of the table is too large:

enter image description here

The difference between the 2 sections is that I have more nested tables on the first section (because I need to) than in the second section.

Is it possible to fix the width of the second section in Outlook?

Here's a fiddle to play with: https://jsfiddle.net/wbpuy5c3/

Thank you

Upvotes: 0

Views: 21

Answers (0)

Related Questions