CODEWITHSUNDEEP
htmlcssemail
user1752759
user1752759

Reputation: 635

Tables Cells In Email Layout

I am creating an email template to send out to a few people, however, for some reason I am running in to some trouble placing a simple left-hand side border on the two right-hand side table cells.

enter image description here

<table class="content" style="table-layout:fixed; background: none repeat scroll 0% 0% #FFFFFF; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FFFFFF">
<thead cellspacing="0" cellpadding="0" border="0">
    <tr style="width: 100%; background: red;" bgcolor="red" cellspacing="0" cellpadding="0" border="0">
        <td style="width: 70%;" rowspan="2" align="left" valign="middle" colspan="8" cellspacing="0" cellpadding="0" border="0">
            <h1>
                <a style="text-decoration: none; font-weight: normal; letter-spacing: -1.5px; line-height: 22px; color: #ffffff; font-size: 22px; padding: 20px 20px 20px 20px;" href="#">
                    <img src="http://dummyimage.com/178x32/000000/fff.jpg&text=Image" alt="image" width="178" height="32" />
                </a>
            </h1>
        </td>
        <td style="width: 30%; border-left: 1px solid #FFFFFF;" align="right" colspan="4" cellspacing="0" cellpadding="0" border="0">
            <table cellspacing="0" cellpadding="0" border="0">
                <tbody cellspacing="0" cellpadding="0" border="0">
                    <tr cellspacing="0" cellpadding="0" border="0">
                        <td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;">Ipsum Dolor Sit</td>
                    </tr>

                    <tr cellspacing="0" cellpadding="0" border="0">
                        <td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px;">
                            <a style="text-decoration: none; color: #ffffff; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" href="#" target="_blank">Cras Odio Ligula</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>

JSFiddle

How do remove the empty space being created (which can be found in-between the vertical and horizontal lines) so that the template is laid out correctly?

Upvotes: 0

Views: 111

Answers (3)

Sandip Vora
Sandip Vora

Reputation: 183

Give 100% width to the table inside 'td' having 30% width. Your problem will be solved.

Upvotes: 1

Marco
Marco

Reputation: 23937

I have given the inner table (inside the right-side <td> tag) a width of 100% and the empty space went away because the inner table spans the whole available width:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody cellspacing="0" cellpadding="0" border="0">
        ...         
    </tbody>
</table>

If you do not define a width of 100% the table consumes only the amount of width it actually needs for all the content + padding + margin.

Fixed Fiddle

Upvotes: 1

Exploring
Exploring

Reputation: 573

Change this following code:

 <td style="width: 21%; border-left: 1px solid #FFFFFF;" align="right" colspan="4" cellspacing="0" cellpadding="0" border="0">
        <table cellspacing="0" cellpadding="0" border="0">

Upvotes: 0

Related Questions