For some reason I can not get the td with 100% inside the table and align the text as center.
How can I make the <td class="order-details"> full width, so it full the 600px of the table obove?
JSFIDDLE: https://jsfiddle.net/61s1cdyo/1/
CODE:
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
<tr class="details">
<td align="center">
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px; display: block;">
<tr align="center" class="header">
<td class="order-details">
<h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
Assuming you want to keep the max-width: 600px, you need to remove the display: block from the inner table to make it act like a table.
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
<tr class="details">
<td align="center">
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px;">
<tr align="center" class="header">
<td class="order-details">
<h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's a Fiddle
There is a max-width: 600px inline setting for the nested table. If you erase that, it's 100% wide:
https://jsfiddle.net/b594a5d5/1/
Related
I've been playing around and can't figure this out, so some advice would be greatly appreciated!
https://codepen.io/chaser87/pen/ZEQvydw
What I want to know deals with just the section headed by Meet your Department. When you shrink down this email, it stacks pretty much how I want it. However, I want to reorder the image and the block of copy in that section. Basically, I want the picture first, then the copy. I've tried doing nth-of-type stuff with elements but isn't working.
For extra background, each section is a 100% table, with a 600 px table within, then another 100% table within.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<title>Boundless opportunities</title>
<style type="text/css">/*<![CDATA[*//* CLIENT-SPECIFIC STYLES */
body, table, td, hr, 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: 616px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
td {
display: block !important;
}
td img {
display: block !important;
width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0px 0px 0px 0px !important;
}
h3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.paragraph-copy {
padding: 20px 15px 20px 15px !important;
font-size: 100% !important;
line-height: 25px !important;
}
.paragraph-align {
text-align: center !important;
}
.social-icons {
padding: 5px 5px 10px 5px !important;
display: inline !important;
width: 15% !important;
}
}/*]]>*/
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/1200x696/000/fff" style="width: 600px;"/>
</td>
</tr>
<tr>
<td class="paragraph-copy" style="padding: 5px 10px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; text-align: left;">
<p>{{First}},</p>
<p>We're excited to welcome you to the {{collegename}}! We look forward to seeing what the future holds for you as a {{major}} major within the Department of {{department}}.</p>
<p>We are here to assist you and look forward to working with you during your time at Generic State University. If we can help you in any way, please let us know. Again, congratulations on taking the next step and joining the {{college}}! </p></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 0px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding-top: 15px">
<!--CONTENT-->
<img src="https://dummyimage.com/220x220/000/fff" style="width: 220px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-align paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 20px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Academic Advisor</span>
</h3>
<p>{{Advisor_Name}}</p>
<p>{{Advisor_Address}}</p>
<p>{{Advisor_Phone_Number}} </p>
<p>{{Advisor_Email}}</p>
<p>{{Advisor_Bio Page}}</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center" style="vertical-align: top;"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 10px 10px 10px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="58%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy paragraph-align" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 10px 10px 10px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Department</span>
</h3>
<p>The {{Department}} is looking forward to your addition to the {{College}} family! </p>
<p>The main office for your department is located in {{department_address}} and you can reach them by phone at {{department_number}} or by emailing {{department_email}}.</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<!--CONTENT-->
<td align="center" style="padding: 15px 10px 10px 10px;"><img src="https://dummyimage.com/200x200/000/fff" style="width: 200px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 5px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding: 20px 10px 0px 10px">
<!--CONTENT-->
<img src="https://dummyimage.com/210x210/000/fff" style="width: 210px">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 0px 10px"><!--CONTENT-->
<h3>
<span>Mark Your Calendar</span>
</h3>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--CONTENT-->
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 15px 0px 5px 0px; vertical-align: top;"><hr style="border-top: 2px solid #000000; width: 50%;">
<p style="padding-top: 15px;">Bookmark these calendars to stay informed about what's going on:</p>
<p><a style="color: #FE5C00" href="#"><strong>Academic College Calendar</strong></a><strong> | <a style="color: #FE5C00" href="#">College Calendar</a> | <a style="color: #FE5C00" href="#">Athletics Calendar</a></strong></p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/600x95/0fe5c1/fff" style="width: 600px; display: block;" /></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="background-color: black">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td valign>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="left" style="padding: 10px 0px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 12px; line-height: 18px; color: #FFFFFF"><!--CONTENT-->
<p>College of Engineering <br>
Generic State University<br>
136 Whatever Building | Orlando, FL 00000</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="38%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between"><!--CONTENT-->
<td align="right" style="padding: 25px 15px 20px 0px;"><img alt="OSU's Facebook Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Twitter Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Instagram Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Snapchat Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /></td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add reverse class to the cell containing Meet Your Department section's two columns and use the following CSS in your media query:
td:not(.reverse) {
display: block !important;
}
td.reverse {
display: flex;
flex-direction: column-reverse;
}
I'm trying to make sure all the padding aligns as well as the text and logo aligning in this html.
The code I've used to make everything align is listed below.
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
<tbody>
<tr>
<td align="left" valign="top" style="font-family:'Arial, 'Georgia', Times New Roman, serif;font-weight:normal;font-size:15px;mso-line-height-rule:exactly;line-height:19px; color:#000000;" class="" width="400">
<div class="ee_editable" style="position: static;">
<div class="" style="padding-top: 10px;"><br></div>
<div class="headline">DISCOVER OUR<br> LATEST OFFERS</div>
<div> </div>
</td>
<td width="180">
<a href="https://dmtrk.net/t/20AS-67H0B-UDWVGK-3JC7VW-1/c.aspx" target="_blank">
<img src="http://www.kindlewood.co.uk/bmw_images/minilogo180x80.png" alt="MINI" width="117" height="52" class="ee_editable ee_smallimage ee_pnggif_image" title="MINI" align="right" border="0">
</a>
</td>
</tr>
<tr>
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_imageelement" ee-type="element" data-title="Image" style="width: 580px;table-layout: auto;">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;" class=""><img border="0" src="https://i.emlfiles4.com/cmpimg/0/0/7/3/9/files/10607126_day10mniheader.png" style="width: 100%; min-height: auto; display: block; max-width: 100%;" class="ee_editable" width="580"></td>
</tr>
</tbody>
</table>
The above code is wrapped in a code like this:
<table border="0" cellpadding="0" cellspacing="0" width="640" style="width: 640px; background-color: rgb(255, 255, 255);table-layout: auto;" class="w320" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="min-width: 320px; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;" width="640">
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
Right now, the page displays as so:
But I need the white mini pic, text and logo to align with the rest of the page. Thanks for any input!
You need to span the td with the image across two columns, since the row above as two td's, if that makes sense.
So if you change
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
to
<td colspan="2" class="ee_dropzone" width="580" align="left" style="width: 580px;">
you should be good to go.
Trying to replicate this sort of design/structure:
Notice Below the two boxes on one side of the table and the one big one on the other!
How would I achieve this using table css? Here's my current code, which is vertically stacked:
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Any idea?:
Steven is right, in theory:
the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:
table
{
margin-left: auto;
margin-right: auto;
}
But the article mentioned in the beginning of this answer gives you all the other way to center a table.
An elegant css cross-browser solution:
This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
See this post
edit thats center this is horizontal just change the neccecery css or see here!
I am working with the new responsive templates in dotmailer and all elements are now block tables, there are no multi-column tables. I want to stack a right table element over a left table element in a responsive environment while keeping the left/right arrangement on the desktop.
Here is the code for the full element I am working in
I have tried creating the element as a table with columns but cannot save the file when I do that, I have tried css with floats on table ids, the tables, td, and inline css, some of this configurations would flip the order on desktop not a phone. (I am looking specificaly at iphone6)
Is it possible to flip the stacking on block elements?
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row two-cols ee_columns ee_element" ee-type="container" data-title="2 columns" style="position: relative; background-color: rgb(174, 184, 194);">
<tbody>
<tr>
<td align="center" valign="top" class="row-inner f-size-0 element-pad" dir="ltr" style="padding: 0px 10px 0px 0px;"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:650px;" width="650" class="mso-table-width"><tr><td align="left" valign="top" style="width:331px;" width="320" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="51" style="max-width: 50.92%; min-width: 331px; width: 650px;" id="right-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_bottom">
<tbody>
<tr>
<td dir="rlt" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element" ee-type="element">
<tbody>
<tr>
<td align="left" class="element-pad element-bord" style="padding: 0px;"><img src="img" alt="" style="width: 100%; display: block; height: auto;" class="ee_editable vedpw331" ee-width="331" border="0" width="331" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td><td align="left" valign="top" style="width:325px;" width="325" class="column"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="49" style="max-width: 49.07%; min-width: 319px; width: 650px;" id="left-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_top">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_element ee_spacer col-font-reset" ee-type="element">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" border="0" width="1" height="10" /></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p class="h3" style="text-align: left; font-size: 17px; color: rgb(255, 255, 255); line-height: 120%;"><b>Headline</b></p>
</div></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p style="font-size: 14px; color: rgb(255, 255, 255); line-height: 120%;" class="col-text">Text elements here</p>
</div></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:319px;" width="319" class="mso-table-width"><tr><td align="left" valign="top" style="width:319px;" width="330" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 20px;padding-bottom: 0px;padding-left: 20px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 20px;" alt="" class="" width="1" border="0" height="20" /></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="background-color: rgb(218, 222, 227);" dir="ltr" class="col-inner ee_dropzone" align="left"><table class="col-font-reset ee_element" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="element-pad element-bord" valign="top" align="left"><div class="ee_editable">
<p style="margin: 0px; text-align: center; font-size: 17px; color: rgb(83, 169, 172);"><b>Text Button</b></p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" width="1" border="0" height="10" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
There are a couple of ways of achieving this:
Method 1: I've found that the simplest way to achieve a reverse stack in email is to code your two columns into <th> tags, then with a class style the header cells to display as table-footer and table-header respectively.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
.thg{ display: table-header-group !important; width:100% !important; font-weight:normal;}
.tfg{ display: table-footer-group !important; width:100% !important; font-weight:normal;}
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320" bgcolor="#333333">
<tr>
<th class="tfg" bgcolor="#CCCCCC">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>left</td>
</tr>
</table>
</th>
<th class="thg" bgcolor="#999999">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>right</td>
</tr>
</table>
</th>
</tr>
</table>
</div>
Method 2: If keeping your content in block tables is important to you then you could use the below method. The tables are declared with the right table before the left and reordered using the direction style. This method will require VML to keep then inline on Outlook 2007, 10 and 13.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<td style="direction:rtl">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="direction:rtl">
<tr>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#CCCCCC">
<tr>
<td>right</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#999999">
<tr>
<td>left</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
I am editing a MailChimp newsletter template and am having an issue removing some padding (see image).
I have removed some padding from this line of code:
<td valign="top" class="headerContainer" style="padding-top:0px; padding-bottom:10px;">
but this does not affect the content as the padding seems to be generated by element.style when the page loads.
Full code for the header section is below.
How can I remove the padding?
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td valign="top" class="headerContainer" style="padding-top:0px; padding-bottom:10px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding:0px" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer">
<tbody><tr>
<td class="mcnImageContent" valign="top" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0; text-align:center;">
<img align="left" alt="" src="https://gallery.mailchimp.com/4ca693f814be731ac4d5dc5f0/images/490a75b1-274d-421a-bd88-ef1c23165352.png" width="140" style="max-width:140px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END HEADER -->