html - Tables Cells In Email Layout -

html - Tables Cells In Email Layout -

i creating email template send out few people, however, reason running in problem placing simple left-hand side border on 2 right-hand side table cells.

<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 remove empty space beingness created (which can found in-between vertical , horizontal lines) template laid out correctly?

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

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

if not define width of 100% table consumes amount of width needs content + padding + margin.

fixed fiddle

html css html5 css3 email