Strage 1px white border in table - html

I'm trying to build this newsletter template using tables and I came across this very weird behavior of the table. Somewhat it has this 1px border around the tr or something.
I'm using a .png image inside the column and I read that this might cause the problem but I couldn't fix it.
<body style="background-color: rgb(209,213,214)">
<p> </p>
<table align="center" cellpadding="1" cellspacing="1" style="background-color:rgb(255, 255, 255);width:650px;">
<tbody>
<tr style="background-color: rgb(209,213,214);">
<td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td>
</tr>
<tr>
<td style="width: 600px;"> <img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr>
<td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;"> </span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr 5="" style="background-color: rgb(209,213,214);>
<td colspan=">
</tr>
</tbody>
</table>


If your talking about the 1px white line then set your,
border="0" cellspacing="0" cellpadding="0" of table to 0 .
Then,
<html>
<head>
<title></title>
</head>
<body style="background-color: rgb(209,213,214)">
<p> </p>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="background-color:rgb(255, 255, 255);width:650px;">
<tbody>
<tr style="background-color: rgb(209,213,214);">
<td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td>
</tr>
<tr>
<td style="width: 600px;"> <img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr>
<td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;"> </span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr 5="" style="background-color: rgb(209,213,214);>
<td colspan=">
</tr>
</tbody>
</table>
Further, If you want to remove the space between the image then, Set img as block if you want to remove that space as well.
img {
display: block;
}
<html>
<head>
<title></title>
</head>
<body style="background-color: rgb(209,213,214)">
<p> </p>
<table align="center" cellpadding="0" cellspacing="0" style="background-color:rgb(255, 255, 255);width:650px;">
<tbody>
<tr style="background-color: rgb(209,213,214);">
<td colspan="5" style="padding: 0px; vertical-align: bottom;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217161.png" style="width: 650px; height: 66px;" /></td>
</tr>
<tr>
<td style="width: 600px;"> <img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216084.png" style="width: 170px; height: 80px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216108.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216125.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 30px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216140.png" style="width: 25px; height: 25px;" /></td>
<td style="width: 50px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508216152.png" style="width: 25px; height: 25px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; width: 615px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218847.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr>
<td colspan="5" style="vertical-align: top; background-color: rgb(209, 213, 214); padding: 0px;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508217471.png" style="width: 650px; height: 75px;" /></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: top; padding-left: 10px;"><strong><span style="font-size:28px;"><span style="font-family:arial;"> </span><span style="font-family:georgia;"> Cora Trade Center</span></span></strong></td>
</tr>
<tr>
<td colspan="5" style="height: 30px; vertical-align: middle; padding-left: 20px; text-align: center;"><img alt="" src="https://sendy.antreprenordigital.ro/uploads/1508218869.jpg" style="width: 601px; height: 15px;" /></td>
</tr>
<tr 5="" style="background-color: rgb(209,213,214);>
<td colspan=">
</tr>
</tbody>
</table>


You need to apply your default html table with border-collapse: collapse;
table{
border-collapse: collapse;
}

Related

HTML tables: merging row cells

I have the following code:
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
which produces the following table:
How can I merge my "x" and "y" cells so that the row they're in consists of only one cell "xy"?

<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
</tbody>
</table>
Colspan is what you seek. Also dunno if someone told you but inline css is bad practice you should use class instead
Here you have the code with class instead of inline css : (same result but prettier)
.bigRow {
height: 126px;
}
.bigRow-2 {
height: 108px;
}
.bigRow td, .bigRow-2 td {
height: 100%;
width: 50%;
}
.smallRow {
height: 18px;
}
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr class="bigRow">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
<tr class="bigRow-2">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
</tbody>
</table>
<p> </p>
</div>

Outllok adds HTML Table's rows extra white spaces

I'm trying to create a email sign. and I thought I did it but in mobile nested tables rows have extra whitespace, how can I remove it?
What I Wrote:
<table class="tg" border="0" cellspacing="0" cellpadding="0" width="813" height="146" style="display:block; border-collapse: collapse; border:hidden; max-height:156px; max-width:813px">
<thead>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<a href="https://www.isverenim.com">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/a.png" width="250" height="146">
</a>
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/b.png" width="154" height="146">
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<a href="https://www.bariserdem.com"><img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/c.png" width="232" height="146">
</td>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="">
<img style="margin: 0px; border: 0px; padding: 0px; display: block;" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/d.png" width="71" height="146">
</td>
<td>
<table style="display:block; border-collapse: collapse; border:hidden;" border="0" cellspacing="0" cellpadding="0" width="106" height="146">
<thead>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="51">
<img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e1.png" width="106" height="51">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="27">
<a href="https://www.linkedin.com"><img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e2.png" width="106" height="27">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="27">
<a href="https://www.twitter.com"><img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e3.png" width="106" height="27">
</td>
</tr>
<tr>
<td bgcolor="#0072bc" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class="" width="106" height="41">
<img style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle" alt="companyname logo" aria-hidden="true" border="0" src="https://sgkkurumsal.com/Content-Home/img/beBolunmusImzalar/e4.png" width="106" height="41">
</td>
</tr>
</thead>
</table>
</td>
</tr>
</thead>

Fixed HTML table layout breaking width

Can anyone tell me why the rows in this layout are breaking the width? I know it's a fixed-width static layout, and it's an in-line mess, but this is what we need to use until I can develop a fluid/responsive layout.
Self-taught coder, so there's probably a lot I'm doing wrong here. The layout should be a single column, with one row at the bottom that needs 3 table cells as displayed in the snippet.
<!doctype html>
<html>
<head><title>JFG eNewsletter</title></head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" /></td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non&dash;depository investment products offered and sold through Johnson Bank and Cleary Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non&dash;depository investment products are subject to investment risks, including possible loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine, WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

If you're talking about the line just above your footer being slightly narrower than the rest, all you need to do is ensure a constant width for the rows of 600px by adding width: 600px inline to the relevant <tr> element:
<!doctype html>
<html>
<head>
<title>JFG eNewsletter</title>
</head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block; width: 600px;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non&dash;depository investment products offered and sold through Johnson Bank and Cleary
Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non&dash;depository investment products are subject to investment risks, including possible
loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine,
WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hope this helps! :)

Auto adjust html table coulmns according to its content

I want to
1. adjust first column width according to largest length(it will be varying) of td element consisting it.
2. Want to set fixed width for other columns so that its content will be fit into one row (i.e. no wrapping).
Any help will be appreciated.
<head>
<style type="text/css">
table {
table-layout: auto;
border-collapse: collapse;
width: 100%;
}
table td {
border: 2px solid green;
}
.style2
{
height: 23px;
<!--width: 100%;-->
<!-- width: 500px;-->
}
.style3
{
height: 23px;
width: 30px;
<!-- width: 92px;-->
font-size: xx-small;
}
.style4
{
height: 23px;
<!-- width: 109px;-->
font-size: xx-small;
background-color: #CCCCCC;
}
.style5
{
width: 30%;
height: 30px;
}
.style6
{
border-style: solid;
border-width: 1px;
padding: 1px 4px;
}
.style7
{
background-color: #CCCCCC;
}
.style8
{
height: 23px;
<!-- width: 109px;-->
background-color: #999999;
}
.style9
{
background-color: #999999;
}
.style10
{
height: 23px;
<!-- width: 92px; -->
background-color: #999999;
}
.style13
{
height: 23px;
<!-- width: 92px;-->
font-size: xx-small;
background-color: #FFCCFF;
}
.style14
{
font-size: xx-small;
background-color: #CCFF66;
}
.style18
{
font-size: xx-small;
background-color: #CCCCCC;
}
.style19
{
height: 23px;
width: 100%;
<!-- width: 289px;-->
font-size: small;
}.
}
</style>
</head>
<table style="height: 75px;" border="1">
<tbody>
<tr style="height: 23px;">
<td style="height: 23px;" colspan="10"> <strong> AW Build</strong></td>
</tr>
<tr style="height: 23px;">
<th class="style2"> Teams</th>
<td style="height: 23px;" colspan="3" class="style7"> 0512</td>
<td style="height: 23px;" colspan="3" class="style7"> 0511</td>
<td style="height: 23px;" colspan="3" class="style7"> 0512</td>
</tr>
<tr style="height: 23px;">
<td class="style19">AW-Consumer Packaged Good</td>
<td style="height: 23px;" class="style9"> TC1121</td>
<td class="style10">TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9"> TC1121</td>
<td style="height: 23px;" class="style9"> TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9">TC1121</td>
<td style="height: 23px;" class="style9">TC1122</td>
<td class="style8">TC113</td>
</tr>
<tr style="height: 23px;">
<td class="style19">AW-User Management</td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td class="style13">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td class="style4">P-85 NAF-12 FF-3</td>
</tr>
<tr style="height: 23px;">
<td class="style19">Active Content Experience</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
<tr style="height: 23px;">
<td class="style19">Audit Subscription and License</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
</tbody>
</table>
<p>
<br />
</p>

How can I get rid of this table border?

I've tried everything but nothing short of setting the outer-most table's border to 0 works. I want to get rid of the line below the cell with "big cell text" in it. Code is pretty messy but here's the link to jsfiddle so you could... fiddle around with it. The code to the table structure is exactly the same as what I use in the site but obviously the data is replaced.
Any clues?

Set border-bottom and border-top to none: http://jsfiddle.net/nUrE7/

Here you go. Added border-bottom:none; and border-top:none; in your code.
<table cellspacing="0" cellpadding="1" border="1" style="width: 100%;">
<tr >
<td colspan="7" border="0" style="width: 100%; text-align: left; height: 100px; vertical-align:middle;border-bottom:none;"> big cell text </td>
</tr>
<tr border="0">
<td colspan="7" border="0" style="width: 100%; text-align: left; vertical-align:middle;border-top:none; "><table cellspacing="0" cellpadding="1" border="0" style="width: 100%;">
<tr border="0">
<td border="0" width="10%"><strong>1:</strong></td>
<td border="0" width="90%" style="text-align: left;">text1</td>
</tr>
<tr border="0">
<td border="0" width="10%"><strong>2: </strong></td>
<td border="0" width="90%" style="text-align: left;">text2</td>
</tr>
</table></td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%;text-align: right;">Total</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">a</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">b</td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%; vertical-align:middle; text-align: center; height: 20px;"><strong>c</strong></td>
<td colspan="2" style="width: 26%; text-align: center; height: 20px; vertical-align:middle;">d</td>
</tr>
</table>