我一直在尝试编写我的第一封HTML电子邮件。我是用表格写的，因为我知道HTML电子邮件不喜欢HTML5。我所要做的就是使它具有响应性，使连续的3张图像成为一条垂直线。当我当前调整它的大小时，只有三个图像中的最后一个会相应地移动。我看了一遍又一遍代码，看不出哪里出了问题。如有任何帮助，我们将不胜感激。
body {
Margin: 0;
padding: 0;
background-color: #f6f9fc;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #f6f6f6;
padding-bottom: 40px;
}
.webkit {
max-width: 600px;
background-color: #ffffff;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family: sans-serif;
color: #4a4a4a;
}
.three-columns {
text-align: center;
font-size: 0;
line-height: 0;
padding-top: 40px;
padding-bottom: 30px;
}
.three-columns .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}
.padding {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
.three-columns .content {
font-size: 15px;
line-height: 20px;
}
a {
text-decoration: none;
color: #4a4a4a;
font-size: 16px;
}
@media screen and (max-width: 600px) {
img.third-img-last {
width: 200px!important;
max-width: 200px!important;
}
.padding {
padding-right: 0!important;
padding-left: 0!important;
}
}
@media screen and (max-width: 400px) {
img.third-img {
width: 200px!important;
max-width: 200px!important;
}
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./RDFavicon.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<title>Red Dot Recruitment</title>
</head>
<body>
<center class="wrapper">
<div class="webkit">
<table class="outer" align="center">
<tr>
<td>
<table width="100%" style="border-spacing: 0;">
<tr>
<td style="background-color: #ffffff;padding:10px;text-align:center;">
<a href=""><img src="reddotheader.png" width="480" alt="Logo" title="Logo"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<a href="https://www.reddotjobs.co.uk/"><img src="redarrowimage.png" width="600" alt="Red arrow banner" style="max-width: 100%;"></a>
</td>
</tr>
<tr>
<td>
<table width="100%" style="border-spacing: 0;">
<tr>
<td class="three-columns">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#">
<img class="third-img" src="plug_sector_2.png" width="150" alt="Contact center staff" title="Contact Centre roles" style="max-width: 150px;">
</a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-size: 17px;font-weight: bold;">CONTACT CENTRE SENIOR ROLES</p>
<p>We deliver permanent and contract senior executives to UK Based Contact centres via our dedicated senior roles team.</p>
<a href="#">Learn more..</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#">
<img class="third-img" src="plug_sector_1.png" width="150" alt="Contact center staff" title="Contact Centre roles" style="max-width: 150px;">
</a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-size: 17px;font-weight: bold;">CONTACT CENTRE ROLES</p>
<p>We deliver permanent, contract and contingent staff to UK Based Contact centres.</p>
<a href="#">Learn more..</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#">
<img class="third-img-last" src="plug_sector_4.png" width="150" alt="Executive Search" title="Executive Search" style="max-width: 150px;">
</a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-size: 17px;font-weight: bold;">JOBS IN EDUCATION</p>
<p>We deliver permanent, contract and supply staff to Education facilities, ranging through Teaching Assistants, Teachers, Leadership, and support roles.</p>
<a href="#">Learn more..</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" style="border-spacing: 0;">
<tr>
<td style="background-color:#FA343B;padding:15px;text-align:center;">
<p style="font-size:18px;color:#ffffff;Margin-bottom:13px;">Connect with us</p>
<a href="#"><img src="white-facebook.png" width="30" alt="Facebook logo"></a>
<a href="#"><img src="white-linkedin.png" width="30" alt="Linkedin logo"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #ffffff">
<table width="100%" style="border-spacing: 0;">
<tr>
<td style="padding:20px;text-align:center;">
<a href="#"><img src="reddotheader.png" alt="Red Dot Logo" width="360"></a>
<p>Phone number: </p>
<p>Email Address: </a>
</p>
<p>Address: </p>
</br>
</td>
</tr>
<tr>
<td style="background-color:#FA343B;padding:15px;text-align:center;">
<p style="font-size: 14px; color:#ffffff; Margin-top:18px; font-family:'Arvo',serif; line-height: 23px;">This message (and any associated files) is intended only for the use of the individual or entity to which it is addressed and may contain information that is confidential, subject to copyright or constitutes a trade secret. If you are
not the intended recipient you are hereby notified that any dissemination, copying or distribution of this message, or files associated with this message, is strictly prohibited. If you have received this message in error, please notify
us immediately by replying to the message and deleting it from your computer. Messages sent to and from us may be monitored.
</br>
</br>
Any views or opinions presented are solely those of the author and do not necessarily represent those of the company.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>在所有电子邮件客户端中，某些元素(如table、td(不支持显示内联块。您需要一个Doctype来确保它被应用，并且一些电子邮件客户端会将其剥离或替换为旧版本。
使用th而不是td更为常见。如果没有doctype，如果您将display:block应用于td/表，WebKit(iOS邮件(将不会执行任何操作，但如果您将其设置在th上，它会起作用。
<table role="presentation" style="width:600px;" border="0" cellpadding="0" cellspacing="0" class="fullwidth">
<tr>
<th class="columns" style="font-weight: normal;" align="center">
<table role="presentation" width="300" style="width:300px;" border="0" cellpadding="0" cellspacing="0" class="fullwidth">
<tr>
<td align="center">
<img src="https://picsum.photos/300/300" alt="Alt text." width="300" height="300" style="display:block;"/>
</td>
</tr>
</table>
</th>
<th class="columns" style="font-weight: normal;" align="center">
<table role="presentation" width="260" style="width:260px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat faucibus felis, in interdum nunc cursus ut. Nam mauris tortor, posuere tincidunt mattis sed, vehicula auctor turpis.</p>
</td>
</tr>
</table>
</th>
</table>
CSS：
@media screen and (max-width:640px) {
.fullwidth {
width: 100%!important;
min-width: 100%!important;
max-width: 1000px!important;
height: auto!important;
}
.columns {
width: 100%!important;
display: block!important;
}
}
我有一个简短的例子：https://codepen.io/emailjay/pen/qBaELEv