CODEWITHSUNDEEP
htmlcss
Adobe_14
Adobe_14

Reputation: 33

The width of the TD is ignored in Outlook 2007/2010/2013

I have created 2 child tables within a parent table. The width of the tables look fine in all the email clients except Outlook 2007/2010/2013 and 2016. The right columns shifts towards the right and ignores the TD width(5%) on both the sides. Can anyone help me out with this?

Here is the code:

` 

                    <!-- Second slider -->
                    <tr>
                        <td align="center" valign="top">
                            <table class="parentTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
                                <tr>
                                    <!-- 1st column - spacing -->
                                    <!-- <td valign="top" width="5%">&nbsp;</td> -->

                                    <!-- 2nd column - left section -->
                                    <td valign="top" width="50%">
                                        <table class="childTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                            <tr>
                                                <td valign="top" width="5%" >&nbsp;</td>
                                                <td width="40%"> 
                                                    <table class="list-table_1" border="0" cellpadding="0" cellspacing="0" style="border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_1" style="font-family: Georgia, serif;">Left Column Content 1</p>
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="10">&nbsp;</td>
                                                        </tr>     
                                                        <tr>
                                                            <td valign="top" align="center" >
                                                                <img src="" class="img-responsive" alt="" style="max-width: 100%;" />
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="5">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_2" style="font-family:Georgia, serif;">Left Column Content 2</p>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td valign="top" width="5%" style="border-right:1px solid #0060af;">&nbsp;</td>
                                            </tr>
                                        </table>
                                    </td>

                                    <td valign="top" width="50%">
                                        <table class="childTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                            <tr>
                                                <td valign="top" width="5%" >&nbsp;</td>
                                                <td width="40%"> 
                                                    <table class="list-table_1" border="0" cellpadding="0" cellspacing="0" style="border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_1" style="font-family: Georgia, serif;">Right Column Content 1</p>
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="10">&nbsp;</td>
                                                        </tr>     
                                                        <tr>
                                                            <td valign="top" align="center" >
                                                                <img src="" class="img-responsive" alt="" style="max-width: 100%;" />
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="5">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_2" style="font-family:Georgia, serif;">Right Column Content 2</p>
                                                            </td>
                                                        </tr>

                                                    </table>
                                                </td>
                                                <td valign="top" width="5%">&nbsp;</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Second slider ends -->

                </table>



            </td>
        </tr>
    </table>

`

Thanks

Upvotes: 1

Views: 1374

Answers (1)

Josh
Josh

Reputation: 4322

Not sure if this will help you, but I've encountered issues before where Outlook will ignore widths and heights of empty table cells, even if there is an NBSP.

You might try adding something like an underscore in the same color as your background and see if that makes any difference. A small transparent PNG may also work.

Another possible method is to use padding on the TD rather than specifying a width.

Upvotes: 1

Related Questions