html电子邮件的100％表格宽度 [英] 100% table width for html email
本文介绍了html电子邮件的100％表格宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< body style =background：blue; margin：0; padding：0; border：0 ; outline：0;>
< div id =wrapstyle =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 =500align =center>
< tr>
< td style =
padding：20px 0px 25px 0px;
color：＃000; font-family：Verdana，Geneva，sans-serif;
font-weight： 100; font-size：12px;>
< p>< / p>
< p> Lorem ipsum dolor sit amet。< / p>
< p>许多谢谢
Liam< / p>< / td>
< / tr>
< / table>
< table width =100％>
< tr>
< td style =
width：100％; margin：0; padding：0; border：0; outline：0;
background-color：#ebebeb;
背景：#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;& / A>< /锂>
< li style =display：inline; padding：0 8px 0 0;>< a href =style =text-decoration：none; color：＃545454;& / A>< /锂>
< li style =display：inline; padding：0 8px 0 0;>< a href =style =text-decoration：none; color：＃545454;> Dribbble< / A>< /锂>
< li style =display：inline; padding：0 0 0 8px;>< a href =style =text-decoration：none; color：＃545454;& / A>< /锂>
< / ul>
< / td>
< / tr>
< / table>
< / div>
< / body>
解决方案
这将让你开始：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/ TR / HTML4 / strict.dtd>
< html>< head>< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>< title>< / title>
< style type =text / css>
#outlook a {padding：0;}
body {width：100％！important; -webkit-文字大小调整：100％; -MS-文字大小调整：100％;余量：0; padding：0;} / *强制默认字体大小* /
.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：颜色：＃000001！important;指针事件：自动; cursor：default;}
table td {border-collapse：collapse;}
< / style>
< / head>
< body leftmargin =0topmargin =0marginwidth =0marginheight =0style =margin：0px; padding：0px; background-color：#FFFFFF; bgcolor =＃FFFFFF>< table bgcolor =＃252525width =100％border =0align =centercellpadding =0cellspacing =0>< tr>< ; td>< table width =600border =0align =centercellpadding =0cellspacing =0>< tr>< td valign =topstyle =padding- top：30px; padding-bottom：30px;>
< table width =100％border =0cellpadding =0cellspacing =0bgcolor =＃FFFFFF>
< tr>
< td>
content
< / td>
< / tr>
< / table>
< / td>< / tr>< / table>< / td>< / tr>< / table>< / body>< / html>
这个背景设置为白色（#FFFFFF），所以如果有人转发，他们将白色写作你可以把它改成什么，只要记住没有人想要打黑色。内表（与< body> 标签在同一行）控制html区域背景颜色（＃252525）。内容表是您的中心浮动面板。
请参阅这个线程有关html电子邮件的更多信息。
I am building an HTML email campaign using Mailchimp and my own HTML. I have heard that to build a successful HTML email you must focus on using tables, and use inline CSS. I have removed all padding from my styles and added in 0 measure to margin, padding, border and outline tags. Any suggestions guys? Really stuck with this.
<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>
解决方案
This will get you started:
<!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>
This has the background set as white (#FFFFFF) so that if someone forwards it, they will be writing on white. You can change this to whatever, just keep in mind nobody wants to type on a dark color. The inner table (on the same line as the <body> tag) controls color of the html area background color (#252525). The content table is your center floated panel.
See this thread for a lot more info on html email.
这篇关于html电子邮件的100％表格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
