I am setting up HTML template with 600 px as parent body width, but in outlook 2007 - 2019, full available width is being occupied.
Image is taking 100% of width in outlook versions but it should take only 600 px of width. For others, it is working fine.
<!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" />
<title>test</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial; font-size: 13px"
>
<tr bgcolor="#eeeeee">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
style="box-shadow: 0px 0px 4px 2px #e0e0e0"
>
<tr bgcolor="#ffffff">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
class="email_content"
style="
padding-bottom: 15px;
background-color: #fafafa;
"
>
<div
style="
padding: 5px;
border-radius: 4px 4px 0px 0px;
background-color: #fdaf74;
"
></div>
<!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> -->
<!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> -->
<img style="padding : 20px 0 0 25px;"
src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg
height="40">
</td>
</tr>
<tr>
<table style="margin: 0 7px">
<table
align="center"
width="100%"
class="main-wrapper"
style="border-bottom: 1px solid #eee"
>
<tr>
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial"
>
<tr bgcolor="#F2F2F2">
<td align="center">
<table
cellpadding="0"
cellspacing="0"
width="600"
border="0"
>
<tr>
<td>
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr bgcolor="#ffffff">
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
style="
text-align: left;
font-size: 16px;
padding: 6px 0
10px 18px;
"
>
<p
style="
color: #1a1a1a;
"
>
Hi Sheetal
Chourasiya,
</p>
<p
style="
color: #505050;
"
>
You have
received Plum
E-Gift Card.
Congratulations!
</p>
</td>
</tr>
<tr>
<td
align="center"
>
<img
src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg"
style="
margin: 0;
border: 0;
padding: 0;
display: block;
"
width="600px"
height="300px"
alt="Image"
/>
</td>
</tr>
<tr>
<td
style="
padding: 24px
60px 0;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="
text-align: left;
font-size: 14px;
background-color: #fafafa;
border-radius: 6px;
margin-bottom: 30px;
"
>
<tr>
<th
style="
padding: 24px
0 10px
24px;
text-align: left;
font-size: 16px;
color: #505050;
"
>
Plum
E-Gift
Card
</th>
<td
style="
text-align: right;
padding-right: 20x;
"
>
<a
href="https://docs.xoxoday.com/docs/getting-started-1"
target="_blank"
style="
color: #c7417b;
text-decoration: none;
display: none;
"
>What is
Plum?</a
>
</td>
</tr>
<tr
style="
box-shadow: 0px -1px
0 0 #eaeaea;
"
>
<td
style="
padding: 20px
0 20px
24px;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
>
<tr>
<td>
<span
style="
color: #909090;
font-size: 16px;
margin: 0;
"
>Gift
Card
Code</span
>
</td>
</tr>
<tr>
<td>
<span
style="
color: #505050;
font-size: 20px;
margin: 6px
0
0
0;
font-weight: 500;
letter-spacing: 0.025rem;
"
>77m43dddb46b</span
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


Change this line:
To:
(>100% is a number smaller than 100, for example 90)