html 电子邮件的 100% 表格宽度
[英]100% table width for html email
问题描述
我正在使用 Mailchimp 和我自己的 HTML 构建一个 HTML 电子邮件活动。 我听说要构建成功的 HTML 电子邮件，您必须专注于使用表格，并使用内联 CSS。 我已经从我的样式中删除了所有填充，并以 0 度量添加到边距、填充、边框和轮廓标签。 有什么建议吗？ 真的坚持这一点。
<body style="background:blue; margin:0; padding:0; border:0; outline:0;">
<div id="wrap" style="background:green; width:100%;">
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
height:100px;
background:#4b86fc;
background-size:60px 60px;
">
</td>
</tr>
</table>
<table width="500" align="center">
<tr>
<td style="
padding:20px 0px 25px 0px;
color:#000; font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:12px;">
<p>Hi,</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Many Thanks,
Liam</p></td>
</tr>
</table>
<table width="100%">
<tr>
<td style="
width:100%; margin:0; padding:0; border:0; outline:0;
background-color:#ebebeb;
background:#ebebeb;
border-top:1px solid #c3c3c3;
font-family:Verdana, Geneva, sans-serif;
font-weight:100; font-size:11px;
text-align:center;">
<ul style="list-style-type:none; margin:0; padding:0;">
<li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none; color:#545454;">Homepage</a></li>
<li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none; color:#545454;">Twitter</a></li>
<li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none; color:#545454;">Dribbble</a></li>
<li style="display:inline; padding:0 0 0 8px;"><a href="" style="text-decoration: none; color:#545454;">Facebook</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
4 个解决方案
解决方案1
6 2014-04-02 19:10:38
这将使您开始：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
content
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
这将背景设置为白色（#FFFFFF），以便如果有人转发它，他们将在白色上书写。 您可以将其更改为任何内容，但请记住，没有人想输入深色。 内表（与<body>标签在同一行）控制 html 区域背景颜色的颜色 (#252525)。 内容表是您的中心浮动面板。
有关 html 电子邮件的更多信息，请参阅此线程。
解决方案2
2 2014-04-02 19:02:07
解决方案3
2 2019-11-14 06:39:25
您可以在 html 电子邮件中为表格应用 100% 宽度
还要考虑这些事情：
1 - 必须在<head>包含<meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> <head> 。
2 - 应用mso-line-height-rule: exactly; 在<body> 。 比如， <body mso-line-height-rule:exactly;>
3 - 请避免使用<ul>和<li>标签，您可以使用<p>或任何其他支持标签。 使用• 为子弹。
4 - 使用<table>而不是<div>
5 - 使用<b>而不是<strong> 。
6 - 使用嵌套表，而不是rowspan或colspan 。
转到https://www.campaignmonitor.com/css/获取有关邮件程序 css 的所有帮助
解决方案4
1 2014-04-02 18:32:39
默认情况下，大多数浏览器都会为BODY标签添加边距。 因此你需要
<body style="background:blue;margin:0">
摆脱那个边缘。
解决方案5
0 2014-04-02 18:30:17
你试过把
margin:0;
在体型标签中？
HTML Outlook 2013电子邮件超过面板宽度的100％宽度width =“ 100％”设置
[英]HTML Outlook 2013 email exceeding 100% width of panel width width=“100%” set
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.