【发布时间】：2016-04-25 17:08:57
【问题描述】：
我在所有表格标签上使用 width=100% 和 max-width=600px，但是当屏幕尺寸较大时，电子邮件会占用整个屏幕尺寸（大于 600px）。基本上它看起来只是响应宽度 100%。有什么想法可以帮助保持此电子邮件的响应性，但也不会在大于 600 像素的屏幕上显示？我希望它最多显示 600 像素宽，但缩小以适应所有屏幕。
代码：
<body>
<!-- Email Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" max-width="600"style="border-collapse: collapse; background-color: #F2F2F2; height: 100% !important;width: 100% !important;">
<tbody>
<tr>
<td align="center" valign="top" style="margin: 0;padding: 20px;border-top: 0;height: 100% !important;width: 100% !important;">
<!-- Container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600"style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<!-- Preheader -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;font-family: Helvetica, sans-serf;font-size: 11px;line-height: 125%;text-align: left;">Forum Group Lorem ipsum dolor sit amet</td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;font-family: Helvetica, sans-serf;font-size: 11px;line-height: 125%;text-align: right;"><a href="#" style="color: #606060">view in browser</a></td>
</tr>
</tbody>
</table>
<!-- End Preheader -->
<!-- Preheader Spacer-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
</tr>
</tbody>
</table>
<!-- End Preheader Spacer-->
<!-- Header Image-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td style="text-align:center">
<img src="img/logo-forum-group.png" max-width="286" max-height="115" border="0" alt="The Forum Group Logo">
</td>
</tr>
</tbody>
</table>
<!-- Header Spacer-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
</tr>
</tbody>
</table>
<!-- Header Strip-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #202020;font-family: Helvetica, sans-serf;font-size: 30px;line-height: 125%;text-align: left; text-transform: uppercase;">The Forum Group</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 20px;padding-bottom: 15px;padding-right: 20px;color: #202020;font-family: Helvetica, sans-serf;font-size: 14px;line-height: 100%;text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 20px;padding-bottom: 9px;padding-right: 20px;color: #202020;font-family: Helvetica, sans-serf;font-size: 14px;line-height: 100%;text-align: left;"><a style="background-color:#3D87F5; color:#fff;border-radius:5px; padding:10px;text-decoration: none;" href="#">Read More</a></td>
</tr>
</tbody>
</table>
<!-- Header Spacer blue-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 10px;color: #202020;font-size: 14px;line-height: 100%;"></td>
</tr>
</tbody>
</table>
<!-- Header Spacer white-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
<!-- End Container -->
</td>
</tr>
</tbody>
</table>
<!-- End Email Wrapper -->
</body>
</html>
【问题讨论】：
-
我不明白你为什么有这么多表，你在说什么“电子邮件”容器？
-
将宽度改为 600px 而不是 100%。
-
我知道表格很烦人，但看起来这是创建 html 电子邮件的最佳选择。
-
你必须为电子邮件 html @MaihanNijat 做内联样式
-
我很高兴为@MaihanNijat 做出贡献，我从 Stack Overflow 学到了很多东西，这是一个很好的附加知识来源。
标签： html css email responsive-design html-email