100% table width for html email

html css email mailchimp

28,026

Solution 1

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.

Solution 2

You can apply 100% width for table in html email

Also consider these things :

1 - Must include <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> in <head>.

2 - Apply mso-line-height-rule: exactly; at the <body>. Like, <body mso-line-height-rule:exactly;>

3 - Please avoid <ul> & <li> tags, you can use <p> or any other supporting tags. Use • for bullet.

4 - Use <table> instead of <div>

5 - Use <b> instead of <strong>.

6 - Use nested tables, rather than rowspan or colspan.

Go to https://www.campaignmonitor.com/css/ for all kind of help in css for mailer

Solution 3

By default, most browsers add margin to the BODY tag. Therefore you need

<body style="background:blue;margin:0">

to get rid of that margin.

28,026

Author by

user3380148

Updated on November 15, 2020

Comments

user3380148 over 3 years

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>

user3380148 about 10 years

Thanks for the reply @peridot1986, thought that does work in an HTML Editor like w3schools, it doesn't work in practise on an iPhone or on web browsers email application.
user3380148 about 10 years

Thanks for the reply @mareoraft that seems to work in an HTML Editor like w3schools, however it doesn't work in practise on an iPhone or on a web browsers email application.
mareoraft about 10 years

People use a CSS Reset to get rid of these default formatting things. Looking at those, you can see they add margin:0; padding:0; border:0; outline:0; to both the BODY and the HTML tags. I hope that works...
user3380148 about 10 years

Thats closer, though I still seem to have some margin at the right of my container, I will edit the original questions code so you can see more clearly, thanks @mareoraft
mareoraft about 10 years

That boilerplate thing looks great. If you look at the code, you can see for the BODY tag and many other tags, they are manually setting width:100%. To be more precise, they are setting body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
user3380148 about 10 years

So I literally, copy that code and kind of, edit away, add my own style etc, it's THAT easy ?? @mareoraft
mareoraft about 10 years

I never used boilerplate myself. You have Jeggs to thank for that.
Eoin over 7 years

I would point out that Outlook ignores margin so you need to use Margin (capital M).