Search code examples
htmlcsshtml-email

Email html not stretching table full width on mobile

I really hate email html. So I have created a new confirmation email for our business and I need the white blocks in the picture below to be the same width. On desktop they look completely fine and match.

Without pasting the full template, this is how the code is structured with the css I am using:

<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td>
                        <table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>First heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>Second heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

And the picture of the issue on mobile:

enter image description here

I am pretty sure that because 600px isn't available on a device that size that it's seeing how with the content is, but I can't use media queries, so not really sure where to turn.

Solution

  • the layout displaying as per your content width in TD. the above HTML code you have give "first heading" and "second heading " as content so characters of second heading are more than first heading so width will not match.

    solution is:

    <table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td>
                        <table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>First heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>Second heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>