【发布时间】：2021-11-01 06:09:33
【问题描述】：
我正在设置 HTML 模板，其父正文宽度为 600 像素，但在 Outlook 2007 - 2019 中，已占用全部可用宽度。
图像在 Outlook 版本中占用 100% 的宽度，但它应该只占用 600 像素的宽度。对于其他人来说，它工作正常。
<!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>【问题讨论】：
-
你能不能贴一张你想要的结果的图片，乍一看好像是因为你的600px表格的包含表格设置为100%宽度。
-
您需要为表格提供宽度属性以固定宽度
标签： html css outlook-2010 outlook-2007 email-templates