Email image is displaying above the table row in Outlook - outlook

I am having trouble getting the images to display correctly in Outlook for an email I am creating. In Outlook, the images are showing up clipped. When the image is clicked, you can see the outline handles of the image and the top two are positioned at the top of the table row above the row that contains the image. (Which is odd, since that row is in a parent table of the table with the image.)
I have tried all the normal fixes I found - setting the img to display: block, making the containing <td> have a line-height, I even set the height attribute to ensure there is enough space to render the image.
Any help would be appreciated.
Edit: I've added the wrapping html to the below code block. There is no other css outside of what is now posted.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
body {
margin:0 !important;
padding:0 20px;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}
p {
Margin: 0;
}
td.phone { display:none !important; }
.contents td { font: 13px/1.45em Arial, Helvetica, sans-serif; mso-line-height-rule: exactly; padding-top: 20px; width: 100%; }
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body>
<div class="bdy">
<style type="text/css">
<!--
.x_full-width
{width:640px}
table.x_editor-body
{width:100%}
table.x_row
{padding:0px;
width:100%}
table.x_row td.x_last
{padding-right:0px}
table.x_columns, table.x_column
{padding-right:0;
margin:0 auto}
.x_el-button table.x_el-wrapper
{border-collapse:separate}
td.x_wrapper
{padding:0}
.x_hide-for-desktop
{}
.x_hide-for-desktop .x_hide-for-desktop .x_hide-for-desktop .x_hide-for-desktop
{}
.x_loop-item >
{table-layout:auto}
.x_editor-body
{font-family:"Helvetica","Helvetica Neue","Arial",sans-serif;
margin:0}
.x_header-footer
{margin:0}
.x_valign
{vertical-align:top}
.x_no-padding
{padding-right:0;
padding-top:0;
padding-bottom:0;
padding-left:inherit}
.x_row
{word-break:break-word}
.x_button
{border:0;
border-width:0;
border-color:none;
border-style:none;
outline:0;
display:block}
.x_align-left
{text-align:left}
.x_align-right
{text-align:right}
-->
</style>
<style>
<!--
.x_wrapper
{width:100%;
table-layout:fixed}
.x_outer
{margin:0 auto;
width:100%;
max-width:600px}
td.x_phone
{}
.x_contents
{font:13px/1.45em Arial,Helvetica,sans-serif;
padding-top:20px;
width:100%}
-->
</style>
<div style="margin:0">
<table class="x_editor-body" style="border-collapse:collapse; font-family:"Helvetica","Helvetica Neue","Arial",sans-serif; width:100%">
<tbody>
<tr>
<td style="padding:0" valign="top" align="center">
<table class="x_import-message" style="font-size:16px; text-align:center; font-family:Arial,Helvetica,sans-serif; padding:10px; border-collapse:collapse" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<table class="x_row x_import-container x_import-container-5 x_import-container-99530235118" style="border-spacing:0px; border-collapse:collapse; word-break:break-word; padding:0px; width:100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="x_wrapper x_valign" style="vertical-align:top; padding:0">
<table class="x_columns x_import-column x_import-column-1" style="width:640px; border-collapse:collapse; padding-right:0; margin:0 auto" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="x_column-content x_valign x_no-padding" style="width:640px; vertical-align:top; padding-right:0; padding-top:0; padding-bottom:0; padding-left:inherit">
<table style="table-layout:fixed; border-collapse:collapse" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="x_import-element x_import-element-block x_import-element-1 x_import-element-45561606396" style="text-align:center; font-size:16px; padding:0; line-height:normal; font-family:Arial,Helvetica,sans-serif; width:640px" align="left">
<div style="text-align:center">
<table id="blockOrderEmailItems" cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;"> </td>
<td class="padding" width="620" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; padding: 0px 0px 20px 0px; text-align: left;">
<table id="orderItemsWrapper" cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<thead style="background: #DEDEDE;">
<tr>
<th class="orderItemTitle" align="left" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: left; width: 270px; padding: 5px;">Item Name</th>
<th class="orderItemSku" align="center" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: center; padding: 5px;">Item Number</th>
<th class="orderItemQty" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: right; width: 40px; padding: 5px;">Qty</th>
<th class="orderItemPrice" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: 600; mso-line-height-rule: exactly; font-size: 16px; text-align: right; width: 80px; padding: 5px;">Price</th>
</tr>
</thead>
<tbody>
<tr class="orderItemConfigurable" style="padding: 5px;">
<td class="orderItemTitle" align="left" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left; font-size: 16px; width: 270px; padding: 5px;">
Fox Racing V2 Overseer Helmet
</td>
<td class="orderItemSku" align="center" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: center; font-size: 16px; padding: 5px;">07120-001-XS</td>
<td class="orderItemQty" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: right; font-size: 16px; width: 40px; padding: 5px;">1</td>
<td class="orderItemPrice" align="right" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: right; font-size: 16px; width: 80px; padding: 5px;">
<span class="price">$179.97</span>
</td>
</tr>
<tr>
<td class="orderItemConfigurable" colspan="4" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left; padding: 5px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td class="padding" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; padding: 0px 0px 20px 0px; text-align: left;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td width="145" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;"> </td>
<td class="orderItemImage" width="125" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; width: 125px; line-height: 125px; text-align: left;">
<img src="product_img_link_here" alt="Fox Racing V2 Overseer Helmet" width="125" style="-ms-interpolation-mode: bicubic; width: 125px; height: 125px; display: block;">
</td>
<td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;"> </td>
</tr>
</table>
</td>
<td width="5" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;"> </td>
<td class="orderItemDetails" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Item Number: 07120-001-XS</td>
</tr>
<tr>
<td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Color: Black</td>
</tr>
<tr>
<td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Size: XS</td>
</tr>
<tr>
<td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Price: <span class="price">$179.97</span></td>
</tr>
<tr>
<td colspan="2" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;">Quantity: 1</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td width="10" style="font: 13px/1.45em Arial, Helvetica, sans-serif; font-weight: normal; mso-line-height-rule: exactly; border-collapse: collapse; vertical-align: top; text-align: left;"> </td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>


I found out that the reason I had a problem was due to setting the image containing element to mso-line-height-rule: exactly and specifying a line-height on the image itself. When I reset the those elements to mso-line-height-rule: at-least and removed the line-height from the it displayed correctly.
A handy trick used in figuring this out, was using Outlook to save the email as html - but then using Word to open the html file. This displayed the email as it does in Outlook, but you can play around with the elements properties to see what needs changed to make it look like you want.


I tried adding this to the original question, but it keeps saying to body is too long
Here is what I get when I save the Outlook email as html:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=unicode">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 14">
<meta name=Originator content="Microsoft Word 14">
<link rel=File-List href="ChapMoto%23%20100041953_files/filelist.xml">
<link rel=Edit-Time-Data href="ChapMoto%23%20100041953_files/editdata.mso">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:DocumentProperties>
<o:Author>AUTHOR</o:Author>
<o:Template>NormalEmail</o:Template>
<o:Revision>1</o:Revision>
<o:TotalTime>0</o:TotalTime>
<o:Created>2018-07-27T21:48:00Z</o:Created>
<o:Pages>1</o:Pages>
<o:Words>1693</o:Words>
<o:Characters>9655</o:Characters>
<o:Company>Hewlett-Packard Company</o:Company>
<o:Lines>80</o:Lines>
<o:Paragraphs>22</o:Paragraphs>
<o:CharactersWithSpaces>11326</o:CharactersWithSpaces>
<o:Version>14.00</o:Version>
</o:DocumentProperties>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if gte mso 9]>
<xml>
<w:WordDocument>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:DoNotExpandShiftReturn/>
<w:BreakWrappedTables/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml>
<![endif]-->
<style>
<!--
/* Font Definitions */
#font-face
{font-family:Helvetica;
panose-1:2 11 6 4 2 2 2 2 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-536859905 -1073711037 9 0 511 0;}
#font-face
{font-family:Helvetica;
panose-1:2 11 6 4 2 2 2 2 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-536859905 -1073711037 9 0 511 0;}
#font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-536870145 1073786111 1 0 415 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
a:link, span.MsoHyperlink
{mso-style-noshow:yes;
mso-style-priority:99;
color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-noshow:yes;
mso-style-priority:99;
color:purple;
text-decoration:underline;
text-underline:single;}
p
{mso-style-noshow:yes;
mso-style-priority:99;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.full-width, li.full-width, div.full-width
{mso-style-name:full-width;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.hide-for-desktop, li.hide-for-desktop, div.hide-for-desktop
{mso-style-name:hide-for-desktop;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;
display:none;
mso-hide:all;}
p.editor-body, li.editor-body, div.editor-body
{mso-style-name:editor-body;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Helvetica","sans-serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.header-footer, li.header-footer, div.header-footer
{mso-style-name:header-footer;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.valign, li.valign, div.valign
{mso-style-name:valign;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.no-padding, li.no-padding, div.no-padding
{mso-style-name:no-padding;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.button, li.button, div.button
{mso-style-name:button;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.align-left, li.align-left, div.align-left
{mso-style-name:align-left;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.align-right, li.align-right, div.align-right
{mso-style-name:align-right;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
text-align:right;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.wrapper, li.wrapper, div.wrapper
{mso-style-name:wrapper;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
p.outer, li.outer, div.outer
{mso-style-name:outer;
mso-style-unhide:no;
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;}
span.price
{mso-style-name:price;
mso-style-unhide:no;}
.MsoChpDefault
{mso-style-type:export-only;
mso-default-props:yes;
font-size:10.0pt;
mso-ansi-font-size:10.0pt;
mso-bidi-font-size:10.0pt;}
#page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.WordSection1
{page:WordSection1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman","serif";}
</style>
<![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple style='tab-interval:.5in'>
<div class=WordSection1>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt;align:center'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td valign=top style='padding:0in 0in 0in 0in;padding-left:inherit'>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt; border-spacing:0px;word-break:break-word'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td style='padding:7.5pt 7.5pt 7.5pt 7.5pt'>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt;border-spacing:0px;word-break:break-word'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width="100%" valign=top style='width:100.0%;padding:0in 0in 0in 0in;padding-left:inherit'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=640 style='width:480.0pt;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt;padding-left:inherit'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=640 valign=top style='width:480.0pt;padding:0in 0in 0in 0in'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=640 style='width:480.0pt;padding:0in 0in 0in 0in'>
<p class=MsoNormal align=center style='text-align:center'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
<div align=center>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt' id=blockOrderEmailItems>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
</td>
<td width=620 valign=top style='width:465.0pt;padding:0in 0in 15.0pt 0in'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt' id=orderItemsWrapper>
<thead>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
<td width=270 style='width:202.5pt;background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Item Name<o:p></o:p></span></b></p>
</td>
<td style='background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal align=center style='text-align:center;line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Item Number<o:p></o:p></span></b></p>
</td>
<td width=40 style='width:30.0pt;background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Qty<o:p></o:p></span></b></p>
</td>
<td width=80 style='width:60.0pt;background:#DEDEDE;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><b><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Price<o:p></o:p></span></b></p>
</td>
</tr>
</thead>
<tr style='mso-yfti-irow:1'>
<td width=270 valign=top style='width:202.5pt;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'><a href="productlink_here" style='text-decoration:solid #3696C2'><span style='color:#3696C2'>Fox Racing V2 Overseer Helmet</span></a> <o:p></o:p></span></p>
</td>
<td valign=top style='padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal align=center style='text-align:center;line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>07120-001-XS <o:p></o:p></span></p>
</td>
<td width=40 valign=top style='width:30.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>1 <o:p></o:p></span></p>
</td>
<td width=80 valign=top style='width:60.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<p class=MsoNormal align=right style='text-align:right;line-height:17.4pt;mso-line-height-rule:exactly'><span class=price><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>$179.97</span></span><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
</td>
</tr>
<tr style='mso-yfti-irow:2'>
<td colspan=4 valign=top style='padding:3.75pt 3.75pt 3.75pt 3.75pt'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td valign=top style='padding:0in 0in 15.0pt 0in'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=145 valign=top style='width:108.75pt;padding:0in 0in 0in 0in'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 0in 0in 0in'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
</td>
<td width=125 valign=top style='width:93.75pt;padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:93.75pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'><img border=0 width=125 id="_x0000_i1026" src="product_img_link_here" style='-ms-interpolation-mode: bicubic;display:block;height:125px;width:125px' alt="Fox Racing V2 Overseer Helmet"><o:p></o:p></span></p>
</td>
<td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
</td>
</tr>
</table>
</td>
<td width=5 valign=top style='width:3.75pt;padding:0in 0in 0in 0in'><p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
</td>
<td valign=top style='padding:0in 0in 0in 0in'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td valign=top style='padding:0in 0in 0in 0in'>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 0in 0in 0in'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
<td valign=top style='padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Item Number: 07120-001-XS<o:p></o:p></span></p>
</td>
</tr>
<tr style='mso-yfti-irow:1'>
<td valign=top style='padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Color: Black<o:p></o:p></span></p>
</td>
</tr>
<tr style='mso-yfti-irow:2'>
<td valign=top style='padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Size: XS<o:p></o:p></span></p>
</td>
</tr>
<tr style='mso-yfti-irow:3'>
<td valign=top style='padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Price: <span class=price>$179.97</span> <o:p></o:p></span></p>
</td>
</tr>
<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes'>
<td valign=top style='padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'>Quantity: 1<o:p></o:p></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width=10 valign=top style='width:7.5pt;padding:0in 0in 0in 0in'>
<p class=MsoNormal style='line-height:17.4pt;mso-line-height-rule:exactly'><span style='font-size:10.0pt;font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman"'> <o:p></o:p></span></p>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align:center'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";display:none;mso-hide:all'><o:p> </o:p></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<p class=MsoNormal align=center style='text-align:center'><span style='font-family:"Arial","sans-serif";mso-fareast-font-family:"Times New Roman";display:none;mso-hide:all'><o:p> </o:p></span></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>


I ran a Litmus test with your updated code and the images still display as expected.
If you're still experiencing problems, one fix I suggest is to wrap "" around your values. As an example, instead of this (line: 289):
<div class=WordSection1>
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt; border-spacing:0px;word-break:break-word'>
Try this:
<div class="WordSection1">
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0"
style="border-collapse:collapse;mso-yfti-tbllook:1184;mso-padding-alt:0in 15.0pt 0in 15.0pt;
border-spacing:0px;word-break:break-word">
Outlook is notoriously finicky when it comes to HTML code. This could be the reason you are having issues.
Good luck.

Related

How to remove additional, unwanted padding under table in Outlook 2016 & 2013?

I am having rendering issues in Outlook 2016 & 2013, it's adding about 20px padding to the bottom of my entire 700px container table. I have applied styling of border-collapse: collapse; mso-margin-bottom-alt:0; to all tables which normally fixes this kind of thing but I'm still having the same issues.
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td bgcolor="#1E1464" align="left"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
<tr>
<td class="col"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr style="display:table; width:100%!important;">
<th class="hide-sm" align="center" width="30px" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt;"> </th>
<th class="col full-width-sm" align="center" width="430" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
<tr>
<td class="hide-sm" style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:24px; line-height:34px; text-align:center;">Lorem ipsum dolor sit</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; text-align:left; font-weight: 300;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi diam nulla, porttitor sagittis erat et, egestas tincidunt arcu. Maecenas ultrices velit velit. Interdum et malesuada fames ac ante ipsum primis.</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="align-sm-center" style="line-height: 40px;"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;"cellpadding="0" cellspacing="0" role="presentation" align="center">
<tr>
<th bgcolor="#23a050" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;">Download now ❯</th>
<th class="hide-sm" align="center" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; padding-left: 20px;"> </th>
<th class="hide-sm" bgcolor="#ffffff" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;"> More information ❯</th>
</tr>
</table></td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:40px;"> </td>
</tr>
</table></th>
<th class="hide-sm" align="center" width="30px" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt;"> </th>
<th class="col" align="center" width="210" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td class="hide-sm" align="center"><img class="img_full_width" style="display:block; height:auto; outline:none; border:0; margin: 0; text-decoration:none; font-family: 'Campton', arial, sans-serif; font-size:20px; line-height:1.5; color:blue; text-align:center; margin:0;" src="images/banner-image.jpg" width="210" height="auto" alt=""></td>
</tr>
<tr style="display:table; width:100%!important">
<th> <!-- end of desktop view here -->
<!--[if !mso]><!-->
<!--desktop hide starts-->
<div class="show-sm align-sm-center" style="display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; width:0; overflow:hidden;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td style="line-height:1px; font-size:1px; text-align:center; font-weight:600;"><img src="images/hero.jpg" alt="" width="100%" height="auto" class="img_full_width" style="display:block; height:auto; outline:none; border:0; text-decoration:none; font-family: sans-serif; font-size:20px; line-height:1.5; color:white; text-align:center;" /></td>
</tr>
</table>
</div>
<!--desktop hide ends-->
<!--<![endif]--> </th>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Any help would be hugely appreciated!

The main problem seems to come from the last part of your code where you’re hiding content from Outlook (<th> <!-- end of desktop view here -->). You're hiding the content inside the <th>, but that still leaves an empty <th> for Outlook, thus creating this 20px or so empty cell visible. In order to fix this, you can move the conditional comment outside of the entire row you want to hide from Outlook. Here's an example:
<!--[if !mso]><!-->
<!-- end of desktop view here -->
<tr style="display:table; width:100%!important">
<th>
<!--desktop hide starts-->
<div class="show-sm align-sm-center" style="display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; width:0; overflow:hidden;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td style="line-height:1px; font-size:1px; text-align:center; font-weight:600;"><img src="https://www.saga.co.uk/emails/2020/Membership/MEM0159/hero7.jpg" alt="Spirit of Discovery" width="100%" height="auto" class="img_full_width" style="display:block; height:auto; outline:none; border:0; text-decoration:none; font-family: sans-serif; font-size:20px; line-height:1.5; color:white; text-align:center;" /></td>
</tr>
</table>
</div>
</th>
</tr>
<!--desktop hide ends-->
<!--<![endif]-->
Also, in this current form, your code will cause problem in the Outlooks on Windows rendering at 120dpi. Here’s a great ressource explaining how to fix this. In short:
Add the Office namespace declaration: <html xmlns:o="urn:schemas-microsoft-com:office:office">.
Add the Office XML Document Settings:
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
Replace every pixel width attribute in HTML with its equivalent in CSS.
Here's a full code example based on your code:
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8" />
<title>Banner</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table class="container" cellpadding="0" cellspacing="0" role="presentation" style="width:700px; border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td bgcolor="#1E1464" align="left"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
<tr>
<td class="col"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr style="display:table; width:100%!important;">
<th class="hide-sm" align="center" height="30" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; width:30px;"> </th>
<th class="col full-width-sm" align="center" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top; width:430px;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
<tr>
<td class="hide-sm" style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:24px; line-height:34px; text-align:center;">Lorem ipsum dolor sit</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; text-align:left; font-weight: 300;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi diam nulla, porttitor sagittis erat et, egestas tincidunt arcu. Maecenas ultrices velit velit. Interdum et malesuada fames ac ante ipsum primis.</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="align-sm-center" style="line-height: 40px;"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;"cellpadding="0" cellspacing="0" role="presentation" align="center">
<tr>
<th bgcolor="#23a050" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;">Download now ❯</th>
<th class="hide-sm" align="center" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; padding-left: 20px;"> </th>
<th class="hide-sm" bgcolor="#ffffff" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;"> More information ❯</th>
</tr>
</table></td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:40px;"> </td>
</tr>
</table></th>
<th class="hide-sm" align="center" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; width:30px;"> </th>
<th class="col" align="center" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top; width:210px;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td class="hide-sm" align="center"><img class="img_full_width" style="display:block; height:auto; outline:none; border:0; margin: 0; text-decoration:none; font-family: 'Campton', arial, sans-serif; font-size:20px; line-height:1.5; color:blue; text-align:center; margin:0;" src="https://www.saga.co.uk/emails/2020/Membership/MEM0159/banner-image.jpg" width="210" height="auto" alt="Saga Possibilities app"></td>
</tr>
<!--[if !mso]><!-->
<tr style="display:table; width:100%!important">
<th> <!-- end of desktop view here -->
<!--desktop hide starts-->
<div class="show-sm align-sm-center" style="display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; width:0; overflow:hidden;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td style="line-height:1px; font-size:1px; text-align:center; font-weight:600;"><img src="https://www.saga.co.uk/emails/2020/Membership/MEM0159/hero7.jpg" alt="Spirit of Discovery" width="100%" height="auto" class="img_full_width" style="display:block; height:auto; outline:none; border:0; text-decoration:none; font-family: sans-serif; font-size:20px; line-height:1.5; color:white; text-align:center;" /></td>
</tr>
</table>
</div>
<!--desktop hide ends-->
</th>
</tr>
<!--<![endif]-->
</table></th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And here’s a test link on Email on Acid. (Here's a test of your code for comparison.)

NVDA not reading text with background images in Outlook

I've been trying to make our emails more accessible but NVDA seems to have trouble reading text when there's a background image in Outlook. Could it be because of the VML or something else? NVDA can read it when I view in browser, but I feel like I shouldn't rely on that being used. I haven't been able to find a lot about email accessibility best practices, and nothing that discusses this issue I'm having. I'm fairly new to this so any suggestions would be appreciated.
Thanks!
<table role="presentation" class="container_module" id="heroWCTA" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;">
<tbody>
<tr>
<td align="center" valign="top" width="100%" background="https://via.placeholder.com/660x220" style=" background-image:url(https://via.placeholder.com/660x220); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px; height:210px;">
<v:fill type="frame" src="https://via.placeholder.com/660x220" />
<v:textbox inset="10,10,10,10" v-text-anchor="top">
<![endif]-->
<table role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;">
<tbody>
<tr>
<td class="padding_top_60 padding_right_110 padding_bottom_12 padding_left_17 text_18_18" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 15px 15px 32px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; -webkit-text-size-adjust:none;">
<div id="heroText">
<h2 class="text_18_18" style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; color:#ffffff; margin:0;"><b>Lorem ipsum<br> dolor sit amet,<br> coctetuer adipiscing<br> elit</b></h2>
</div> </td>
</tr>
<tr>
<td class="padding_bottom_60" width="100%" align="left" style="padding-bottom: 25px; margin: 0;">
<table role="presentation" border="0" width="100%" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="content_17" width="32" align="left" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
<td align="left" style="padding: 0; margin: 0;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="height_22" height="28" width="100%" align="center" border="2" valign="middle" style=" vertical-align:middle; font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 2px solid #00aeef; background-color:#00aeef;">
<!--[if mso]>
<table>
<tr>
<td style="background-color: #00aeef; padding: 7px 10px; text-align: center;"><![endif]--><a class="height_22" role="button" href=
"http://go.na.panasonic.com/SU0K1G00F0005J01H00G00O" style="
text-decoration:none; color:#ffffff; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 12px; vertical-align:middle; height:28px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding:7px 10px; "
><b>Learn More</b></a><br>
<!--[if mso]></td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table> </td>
<td class="content_17" width="32" align="right" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td>
</tr>
</tbody>
</table>

How to force column width support on fluid HTML email in Outlook 2016 without using image spacer

When sending the layout to Outlook 2016 it takes the multi-column table section and shrinks the width of the left and right (possibly increasing the width of the spacer center column too).
Have tried to add a spacer image at the bottom of each column to keep the width, but don't want those to have to load/soak up the file size. depending on the number of rows I add.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml "
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”x-apple-disable-message-reformatting”>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { max-width: 100% !important; height:auto !important; border: 0; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { margin: 0 !important; padding: 0 !important; width: 100% !important; min-width:100% !important;}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
*[class=table]
{
max-width: 600px !important;
width: 100% !important;
border-collapse: collapse !important;
height:auto !important; }
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px)
{
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
width: 100% !important;
max-width: 100% !important;
border-collapse: collapse !important;
height:auto !important;
}
.mobile-wrapper {
width: 100% !important;
max-width: 100% !important;
height:auto !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
.img-social {
width: 15% !important;
max-width: 50% !important;
height: auto !important;
}
*[class=stack]
{
display: block !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
#actual-table { border-collapse: collapse; }
#actual-table td {
width: 20%;
padding: 10px;
vertical-align: top;
}
#actual-table td:nth-child(even) {
background: #ccc;
}
#actual-table td:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body style="text-align:center; margin: 0 !important; padding: 0; !important;" >
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" background="bg.jpg" style="background-size: cover; padding: 0;background: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="left" valign="top" style="padding-top:8px;padding-bottom:5px;">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">View in browser</font> <font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">Link to Forward To A Friend</font> </td></tr>
</table></td></tr></table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding:0;">
<img src="" class="banner" style="display:block;" />
</td>
</tr>
</table></td></tr></table>
</td>
</tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="4"><strong>Add A Headline To Announce Your Main Topic</strong></font></td></tr>
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="3">
Add a brief message. If readers need to know more than you can fit here, add a link to an outside resource that covers the rest.<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" >
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" id="actual-table">
<tr>
<td align="left" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="3"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br />
<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 260px WIDE.<br />
<br />
When editing sections from copied mailings, delete old messages by clicking the red X, move messages up or down in order of importance by clicking the blue up and down arrows and add new sections by clicking the add section here (green '+' icon).</font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="20" style="padding:0; font-size: 1px;"> </td>
<td align="right" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="2"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. </font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#999999" style="background: #999999;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="3"><strong>Design emails people love</strong></font></td></tr>
<tr>
<td class="stack" align="!3BODYFONTALIGN!" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#FFFFFF;" bgcolor="#FFFFFF"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br /><br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#0F0D35" style="background: #0F0D35;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding:10px;background-color:#0F0D35;" bgcolor="#0F0D35">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#FFFFFF" font="" size="2"></font></td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #0F0D35;" bgcolor="#0F0D35" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table width="600" border="0" cellspacing="5" cellpadding="5"> <tr> <td colspan="3"> <hr align="left" width="100%" noshade> <p> <font size="-2" face="Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Generated by</strong></font> <img src= "https://images.marketvolt.com/mv_gif_transparent.gif" width="60" height="55" hspace="4" vspace="0" border="0" align="middle"><font size="-2" face= "Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Learn more</strong></font> </p> </td> </tr></table><img width="1" height="1" src="https://images.marketvolt.com/space.gif">
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>

Spacing in Email

I have a web version that's displaying fine. When I send a test email, it shows unwanted spacing between the images. I tried changing the the padding and margin , but nothing's working. Why is it doing that?
https://jsfiddle.net/tantalizea/r49oqbjj/
CSS:
a,
body,
div,
img,
span,
table,
td,
tr {
margin: 0;
padding: 0;
border: 0;
}
a {
color: #231F20;
font-weight: bold;
text-decoration: none
}
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
area {
outline: none
}
body {
font: normal 100% Arial, Helvetica, sans-serif;
background: #FFF;
color: #231F20
}
img {
border: none;
width: 100%;
height: auto
}
.container {
width: 600px;
margin: 0 auto;
max-width: 600px
}
#preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: #FFFFFF;
color: transparent;
height: 0;
width: 0;
font-size: 0px
}
.desktop {
display: table !important;
margin: 0 auto !important;
}
tr.desktop {
display: table-row !important
}
td.desktop {
display: table-cell !important
}
img.desktop {
display: inline !important
}
.mobile {
display: none !important
}
.break {
display: inline !important
}
#media screen and (max-width: 600px) {
.container {
width: 97.5%
}
.desktop,
tr.desktop,
td.desktop,
img.desktop {
display: none !important
}
.mobile {
display: table !important
}
tr.mobile {
display: table-row !important
}
td.mobile2 {
display: table !important;
width: 100%;
text-align: center !important
}
td.mobile {
display: table-cell !important
}
.break {
display: none !important
}
.hidden {
display: none !important
}
.no-border {
border: none !important
}
.smaller {
font-size: 200% !important
}
.smaller2 {
font-size: 100% !important
}
.center {
text-align: center !important
}
.margin {
margin: 0 auto
}
.image {
width: 100px !important
}
.width-100 {
width: 100% !important
}
}
HTML:
<body style="background:#FFF; color:#858585">
<div id="preheader" style="display:none; visibility:hidden; opacity:0; color:#878787; color:transparent; height:0; width:0; font-size:0px;">Tuesday, March 7, 2017 | 9840 International Drive, Orlando, Florida | Booth #613</div>
<!-- /div#preheader -->
<div class="container" style="margin:0 auto; max-width:600px">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container" style="margin:0 auto; max-width:600px">
<tr class="bronto">
<td height="20"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Is this email not displaying correctly? Try the web version.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="35" class="desktop"> </td>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="bottom" width="76%"><span style="font:normal 300% Times, 'Times New Roman', serif; color:#56565a; line-height:100%" class="smaller"><strong><em>You're Invited!</em></strong></span></td>
<td style="text-align:right" width="24%"><img src="http://www.kravetcontract.com/email_blasts/tipin.png" alt="KK" style="max-width:144px; width:100%" /></td>
</tr>
</table>
</td>
<td width="35" class="desktop"> </td>
</tr>
<!--<tr class="mobile">
<td class="mobile">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" class="mobile">
<tr class="mobile">
<td height="20" class="mobile"></td>
</tr>
<tr class="mobile">
<td align="center" class="mobile"><span style="font:normal 200% Times, 'Times New Roman', serif; color:#57565b;" class="mobile"><strong><em>You're Invited!</em></strong></span></td>
</tr>
</table>
</td>
</tr>-->
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/top.jpg" alt="Top" style="max-width:600px" /></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/left.jpg" alt="Left" style="max-width:78px" /></td>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1px">PLEASE JOIN</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/BDNY2016/logo.png" alt="kravetcontract" style="max-width:280px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">AT THIS YEAR'S</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/newh_logo_2.png" alt="NEWH" style="max-width:192px" /></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011;letter-spacing:1.5px">MARCH 7, 2017 AT 12PM-6PM<br />
BOOTH #613</span></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 81.25% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">9840 International Drive<br />
Orlando, Florida</span></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; line-height:21px; letter-spacing:1.5px">We look forward to seeing you.</span></td>
</tr>
</table>
</td>
<td align="right" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/right.jpg" alt="Right" style="max-width:78px" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px" /></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#56565a">
<table cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td bgcolor="#56565a">GET DIRECTIONS <strong style="font-family:Arial, sans-serif;">►</strong></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td><img src="http://www.kravet.com/style-spotlight/one-family.gif" alt="One Family. Ninety-Eight Years." border="0" style="border:none; width:100%" /></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 150% Helvetica, Arial, sans-serif; color:#858585"><span style="font:normal 87.5%/4mm Helvetica, Arial, sans-serif; color:#858585">#</span>kravetinc</span>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td>
<img src="http://www.kravet.com/style-spotlight/instagram.gif" alt="Instagram" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/facebook.gif" alt="Facebook" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/pinterest.gif" alt="Pinterest" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/twitter.gif" alt="Twitter" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/houzz.gif" alt="Houzz" border="0" style="border:none; width:100%; max-width:50px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">e-designtrade.com</td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 75% Helvetica, Arial, sans-serif; color:#858585">KRAVET® INC | CONTACT US | PRIVACY POLICY</span></td>
</tr>
<tr>
<td align="center"><span style="font:bold 75% Helvetica, Arial, sans-serif; color:#858585">Exclusively Available Through Interior Designers</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">This email was sent to %%!contact_email%% by %%!account_organization%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">%%!account_address1%% | %%!account_city%%, %%!account_state%% %%!account_zip%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Forward to a friend | Manage Preferences | Unsubscribe</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- /table.container -->
</div>
<!-- /div.container -->
</body>

Try using display block on all images.
style="display:block;"
This is a must have on all images.
Cheers

To be quite honest, I actually love the way it looks haha.
But I believe your issue is the img. It's based on the width. The aspect ratio makes the height smaller then the size of the table row. This is probably not the best way to fix it, but after going through a bunch of css changes I couldn't get it to work any other way:
On the specific images. Set the img style to be moved 4 px down:
transform: translateY(4px);
Bottom image, 4 px up:
transform: translateY(-4px);
Ex:
Bottom:
<img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px;transform: translateY(-4px);">
Should look like this:

Scaling to screen size in Outlook

Email isn’t scaling to screen size in outlook. Testing with email on acid and it’s working for other clients, can anyone give me advice?
Code is below. Would appreciate some advice on what needs fixing as this is my first attempt to code an email.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" cass="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 100%;" width="100%"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>

If by "scale to screen" you mean that the image is so much larger in all Outlook, this is because Outlook tends to size images based on the actual size of the hosted image, not your declarations - especially when used as percentages. Your best bet is to resize the hosted image to 640px wide and Outlook should behave properly.
There are many different theories on getting around this, but the only definitive way I have found is to make Outlook behave is to resize the images to the scale you want them to be.

HTML attributes (as in, width="640") can be used to resize images in Outlook. If width is defined, height will be rescaled accordingly. This works in all Outlook versions. However, the image will not be fluid (100% width) with this fix in place. It doesn't look like that's an issue for your email, as it doesn't contain any responsive code. If you use media queries, a style with !important should be able to overwrite this width.
Here is a test showing how this will look: https://www.emailonacid.com/app/acidtest/display/summary/r9Sdqkr0J2kICtkrwc0RUkioQ0uX2yID1BEMvfLUEUczL/shared
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" class="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><a href="#">
<img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 640px;" width="640">
</a></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>

As far as I know there really isn't any kind of scaling for emails in outlook, they take a fixed size and then keep it that way. As has been mentioned you can specify widths in attributes, and this will force that content to the size you specify.
One fairly popular way is starting with a fixed size and then setting elements of the email to have a % max width; this means that outlook will be happy with the fixed widths, and clients which support % widths will also be able to display yor content in a responsive way.

Resources