CODEWITHSUNDEEP
htmlcsshtml-tablehtml-email
DavidMichaelangelo
DavidMichaelangelo

Reputation: 44

Table border not applying on all sides

I have a table with border-left and border-right but in one section of the table it is not being applied. The table border was displaying just fine when I had a few other nested tables within. When I removed them to simplify the box, the border suddenly wouldn't apply to the bottom right corner.

Here's an image:

And here's my code:

        <!-- Start Info Box -->
    <table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
        <tr>
            <td style="padding-top: 20px;">
            <img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
            </td>
        </tr>
        <tr>
            <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
                <tr>
                    <td colspan="3" style="text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
                    Why choose us?
                    </td>
                </tr>
                <tr>
                    <td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
                        <tr>
                            <td style="padding-right: 5px; padding-bottom: 5px;">
                            <img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
                            </td>
                            <td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px;">
                            1-800-YUP-1999
                            </td>
                            <td style="padding-right: 5px; padding-bottom: 5px;">
                            <img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
                            </td>
                            <td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px; padding-right: 15px;">
                            <a style="text-decoration:none; color: #000000;" href="#" target="_blank">Live&nbsp;Chat</a>
                            </td>
                            <tr>
                                <td style="padding-right: 5px; padding-bottom: 1px;">
                                <img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
                                </td>
                                <td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
                                <a style="text-decoration:none; color: #000000;" href="#" target="_blank">E-mail us</a>
                                </td>
                                <td colspan="2" style="padding-bottom: 5px;">&nbsp;
                                
                                </td>
                            </tr>
                        </tr>
                    </table>
                    </td>
                </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
                <tr>
                    <td style="padding-top: 10px; padding-bottom: 0px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">&nbsp;
                    
                    </td>
                </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
            <img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
            </td>
        </tr>
        <tr>
            <td height="20">&nbsp;</td>
        </tr>
    </table>
    <!-- End Info Box -->

Upvotes: 0

Views: 1893

Answers (1)

dognose
dognose

Reputation: 20899

The td in question: 

<td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">

is not having a right border. Add it, then it works.

Without:

https://jsfiddle.net/j5ctrrh0/

With:

https://jsfiddle.net/j5ctrrh0/1/

This is because you are using border-collapse:collapse; on the middle table. The inner table, on which you set border="0" will now collpase with the existing border, thus removing it. See here (removed collapse, changed border of the inner table to 1 so you can see, where the borders will collapse):

https://jsfiddle.net/j5ctrrh0/2/

so, with full collapsing and border=0 on the inner table, you need to set the border on the respective td.

However, iirc it is recommended to use collapse for html-emails.

Upvotes: 3

Related Questions