无法让 table 响应
Can't get table to be responsive
新手又来了。我收到了这封电子邮件，我喜欢一切的样子，但我有两个问题希望有人能回答。
首先 - 当我在 Google Chrome 中打开此页面并调整 window 的宽度时，没有任何变化。它似乎根本没有反应。所以我的代码中一定遗漏了一些东西。我知道这似乎是一个非常普遍的问题，但我需要一些帮助。
我希望 600px 宽 table 是那个宽度，直到 window 或设备低于 600px 宽，此时我希望 600px 宽 table 是流畅的。
其次 - 对于 A 或 B 图像，我注意到它似乎没有垂直居中。我最初希望它位于容纳它的容器的顶部，但现在我希望它垂直居中，顶部和底部的 space 相等。无论是旁边的文字还是图片，正确的做法是什么？我试过垂直对齐，但似乎无法正常工作。
编辑：如果有帮助，我将不再阅读 Jason Rodriguez 在 "The Better Email on Design" 中阅读的教义。
再次感谢您的智慧！
https://codepen.io/chaser87/pen/ExPNRNN
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {width: 100% !important;}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
您在 table 上使用 width="600px"，样式为 100% 宽度。
所以它不会因为这个 width="600px" 限制而改变 table 的宽度。
编辑下方
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" class="fluid-table" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px" class="fluid-table"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
抱歉没有正确阅读您的问题。希望能帮助到你！祝你好运！
在第 23 行@media screen 和（最大宽度：600px），所有元素的宽度都已调整 class "fluid-table" 但不是使用 [=20= 的正确元素].我刚刚修改了那个。希望对您有所帮助！
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" class="fluid-table" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px" class="fluid-table"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
新手又来了。我收到了这封电子邮件，我喜欢一切的样子，但我有两个问题希望有人能回答。
首先 - 当我在 Google Chrome 中打开此页面并调整 window 的宽度时，没有任何变化。它似乎根本没有反应。所以我的代码中一定遗漏了一些东西。我知道这似乎是一个非常普遍的问题，但我需要一些帮助。 我希望 600px 宽 table 是那个宽度，直到 window 或设备低于 600px 宽，此时我希望 600px 宽 table 是流畅的。
其次 - 对于 A 或 B 图像，我注意到它似乎没有垂直居中。我最初希望它位于容纳它的容器的顶部，但现在我希望它垂直居中，顶部和底部的 space 相等。无论是旁边的文字还是图片，正确的做法是什么？我试过垂直对齐，但似乎无法正常工作。
编辑：如果有帮助，我将不再阅读 Jason Rodriguez 在 "The Better Email on Design" 中阅读的教义。
再次感谢您的智慧！
https://codepen.io/chaser87/pen/ExPNRNN
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {width: 100% !important;}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
您在 table 上使用 width="600px"，样式为 100% 宽度。
所以它不会因为这个 width="600px" 限制而改变 table 的宽度。
编辑下方
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" class="fluid-table" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px" class="fluid-table"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
抱歉没有正确阅读您的问题。希望能帮助到你！祝你好运！
在第 23 行@media screen 和（最大宽度：600px），所有元素的宽度都已调整 class "fluid-table" 但不是使用 [=20= 的正确元素].我刚刚修改了那个。希望对您有所帮助！
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" class="fluid-table" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px" class="fluid-table"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>