Skip to content

Instantly share code, notes, and snippets.

@elidickinson
Created May 6, 2013 15:10
Show Gist options
  • Save elidickinson/5525752 to your computer and use it in GitHub Desktop.
Save elidickinson/5525752 to your computer and use it in GitHub Desktop.
Email Template trick: max-width with outlook
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<div style="max-width:580px; margin:0 auto;">
<p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
@GLC-Delivers
Copy link

Do you use conditional outlook comment code around every table or just inner tables whose width you need to control?

@jongrover
Copy link

I needed a responsive (fluid) table that had a maximum width of 600px and this code is working for me:

<!--[if mso]>
   <table><tr><td width="600">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px">
    <tr>
      <td>
          <!-- Your content here -->
      </td>
    </tr>
</table>
<!--[if mso]>
   </td></tr></table>
<![endif]-->

@aamplifyrafael
Copy link

Awesome

@appsilva
Copy link

Thank you !!

@EddyVinck
Copy link

I was making an email in Pardot (marketing tool) and the tool automatically changes the width attribute on my images to the width of the image. Pardot does not allow me to set a maximum width.

<!-- Outlook ignores the max-width -->
<img src="https://example.com/images/my-image.jpg" style="max-width: 200px" width="400">

Since outlook does not care if you set a max-width in the style attribute the only solution is to change the width of the image back after it was uploaded to Pardot.

None of the examples above seemed to work for images (in Outlook) so the only solution for me was to recommend uploading images with the same width as the original image or to change the width back after uploading an image.

@adammenges
Copy link

Dope. Thanks for this.

@S3D-Chad
Copy link

This saved me hours of the worst kind of debugging time, thank you!!

@srsteinberg
Copy link

I'm still having trouble... I tried using this but maybe I'm using it in the wrong place? This is the original before I tried @philipp-klinz idea.
``

<title>Oorah Email Template</title> <script src="https://kit.fontawesome.com/b3fc32efd0.js"></script> <style> p { margin: 1em 0px; } /** * @groupdefinition colorscheme */ group.colorscheme { /*@editable Page Background Color*/ page-background-color: #fff; /*@editable Header Background */ header-background-color: #ffffff; /*@editable Main Text Color*/ text-color: #3C3C3C; /*@editable Link Color*/ link-color: #424242; /*@editable Footer Link Color*/ footer-link-color: #0400F4; /*@editable Body Background Color*/ body-background-color: #fff; /*@editable Footer Background Color*/ footer-background-color: #d2d2d2; /*@editable Vertical Line Color*/ line-color: #d2d2d2; /*@editable Top Link Color*/ top-link-color: #424242; /*@editable Footer Text Color*/ footer-text-color: #3C3C3C; /*@editable Top Text Color*/ top-text-color: #3C3C3C; /*@editable Headlines Color*/ headline-text-color: #3C3C3C; } /* * @section Background_Colors_Layout * @title Colors and Layout */ table.mainTable { /*@editable Page Background Color*/ /*@theme page-background-color*/ background-color: #ffffff; } /* * @section Background_Colors_Layout * @title Colors and Layout */ table.pageTable { width: 606px; padding: 0; margin: 0 auto; } /* * @section Background_Colors_Layout * @title Colors and Layout */ #view_browser { padding: 10px; /*@editable Top Bar Background Color*/ background-color: #e3f4fe; } /* * @section Background_Colors_Layout * @title Colors and Layout */ #header { height: auto; padding: 0; margin: 0 auto; font-size: 0px; /*@editable Header Image Background*/ /*@theme header-background-color*/ background-color: #e3f4fe; } #header img { font-size: 14px; /*This font size covers the alt text*/ } /* * @section Background_Colors_Layout * @title Colors and Layout */ #header_img { /*@editable Header Image Alignment*/ text-align: center; } #content { padding: 15px 20px; } /* * @section Background_Colors_Layout * @title Colors and Layout */ .sidebarR {
        /*@editable Vertical Line Color*/
        /*@theme line-color*/
        
        }
        .sidebarOne td,
        .sidebarTwo td,
        .sidebarL td,
        .sidebarR td {
        padding: 0 10px;
        }
        .sidebarThree td {
        padding-left: 10px;
        }
        .sidebarOne td.spacer,
        .sidebarTwo td.spacer,
        .sidebarThree td.spacer,
        .sidebarL td.spacer,
        .sidebarR td.spacer {
        font-size: 10px;
        padding: 0;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        .col_L {
        /*@editable Left Column Width*/
        width: 50%;
        /*@editable Left Background Color*/
        /*@theme body-background-color*/
        background-color: #e3f4fe;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        .col_R {
        /*@editable Right Column Width*/
        width: 50%;
        /*@editable Right Background Color*/
        /*@theme body-background-color*/
        background-color: #e3f4fe;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        .main {
        /*@editable Content Background Color*/
        /*@theme body-background-color*/
        background-color: #e3f4fe;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        #footer {
        /*@editable footer-background-color*/
        background-color: #00447A;
        }
        /*  * @section Top_Bar  * @title Top Bar  */
        #view_browser p {
        text-align: center;
        /*@editable Text Color*/
        /*@theme top-text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Size*/
        font-size: 10px;
        }
        /*  * @section Top_Bar  * @title Top Bar  */
        #view_browser a {
        /*@editable Link Color*/
        /*@theme top-link-color*/
        color: #fff;
        }
        /*  * @section Left_Headline  * @title Left Column Headline  */
        .sidebarL .titleSide {
        letter-spacing: 1.5;
        text-align: center;
        margin: 5px 0 0 0;
        font-weight: bold;
        /*@editable Headline Color*/
        /*@theme headline-text-color*/
        color: #1C4675;
        /*@editable Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Headline Font Size*/
        font-size: 16px;
        }
        /*  * @section Left_Column  * @title Left Column  */
        .sidebarL .textSide {
        line-height: 1.4 !important;
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 12px;
        }
        /*  * @section Left_Column  * @title Left Column  */
        .sidebarL a {
        /*@editable Link Color*/
        /*@theme link-color*/
        color: #3c3c3c;
        }
        /*  * @section Right_Headline  * @title Right Column Headline  */
        .sidebarR .titleSide {
        letter-spacing: 1.5;
        text-align: center;
        margin: 5px 0 0 0;
        font-weight: bold;
        /*@editable Headline Color*/
        /*@theme headline-text-color*/
        color: #00447A;
        /*@editable Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Headline Font Size*/
        font-size: 16px;
        }
        /*  * @section Right_Column  * @title Right Column  */
        .sidebarR .textSide {
        line-height: 1.4 !important;
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 12px;
        }
        /*  * @section Right_Column  * @title Right Column  */
        .sidebarR a {
        /*@editable Link Color*/
        /*@theme link-color*/
        color: #3c3c3c;
        }
        /*  * @section Background_Colors_Layout  * @title Colors and Layout  */
        /*  * @section Main_Column_Headline  * @title Main Column Headline  */
        #content .titleContent {
        text-align: center;
        margin: 0;
        font-weight: bold;
        /*@editable Headline Color*/
        /*@theme headline-text-color*/
        color: #00447A;
        /*@editable Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Headline Font Size*/
        font-size: 30px;
        }
        /*  * @section Main_Column_Sub-Headline  * @title Main Column Sub-Headline  */
        #content .SubtitleContent {
        text-align: center;
        margin: 0;
        font-weight: normal;
        /*@editable Sub-Headline Color*/
        /*@theme headline-text-color*/
        color: #3B92F5;
        /*@editable Sub-Headline Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Sub-Headline Font Size*/
        font-size: 18px;
        }
        .titleContent p,
        .SubtitleContent p,
        .footer p {
        margin: 0;
        }
        .textContent p {
        text-align: center;
        line-height: 1.4 !important;
        margin: 0 0 12px 0;
        }
        /*  * @section Main_Column  * @title Main Column  */
        #content .textContent,
        #content ul,
        #content ol {
        line-height: 1.4 !important;
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #3C3C3C;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 18px;
        }
        /*  * @section Main_Column   * @title Main Column  */
        #content a {
        /*@editable Link Color*/
        /*@theme link-color*/
        color: #3c3c3c;
        }
        /*  * @section Action_Link   * @title Action Link  */
        .actionLinkContainer {
        /*@editable Alignment*/
        text-align: center;
        margin-top: 5px;
        }
        /*  * @section Action_Link   * @title Action Link  */
		.twoColumn{
			padding-top:15px;
		}
        .twoColumn .actionLinkContainer a,
        .threeColumn .actionLinkContainer a,
        #content .actionLinkContainer a {
        /*@editable Text Color*/
        /*@theme text-color*/
        color: #00447A;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 12px;
        /*@editable Link Color*/
        /*@theme link-color*/
        /*@editable Button Color*/
        /*@important*/
        }
        /*  * @section Footer   */
        #footer {
        height: 40px;
        margin: 0 auto;
        padding: 10px;
        }
        /*  * @section Footer   */
        #footer p{
        text-align:center;
        }
        #footer {
        /*@editable Text Color*/
        /*@theme footer-text-color*/
        color: #fff;
        /*@editable Text Font*/
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        /*@editable Text Font Size*/
        font-size: 11px;
        }
        /*  * @section Footer   */
        #footer a {
        /*@editable Link Color*/
        /*@theme footer-link-color*/
        color: #fff;
        }
        body {
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        font-size: 12px;
        width: 100% !important;
        /* Hotmail body centered */
        display: block !important;
        }
        div.ec_attachments {
        width: 500px;
        margin: 20px 0;
        background-color: #fff;
        font-size: 13px;
        text-align: left;
        font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
        }
        div.ec_attachments li {
        border-top: 1px solid #cccccc;
        padding: 10px;
        }
        div.ec_attachments ul {
        padding-right: 40px;
        }
        div.ec_attachments_text {
        padding: 10px 0 0 10px;
        }
        #attachments div.ecaction_edit {
        border: 1px solid #cccccc;
        }
        #page {
        margin: 0px auto;
        padding: 0;
        }
        #view_browser {
        width: 600px;
        }
        a img {
        border: none;
        }
        #global_masthead {
        width: 600px;
        }
        #main {
        width: 600px;
        }
        .spacer {
        font-size: 10px;
        padding: 0;
        }
        .sidespacer {
        font-size: 5px;
        padding: 0;
        }
        .mainTable img {
        height: auto !important;
        }
    </style>
    <style data="noinline">
        body {
        width: 100% !important;
        /*Hotmail Fix*/
        }
    </style>
    <style data="mobile" data-title="Mobile" data-width="335" data-rule="@media only screen and (max-width: 480px), screen and (max-device-width: 480px)">
        @media only screen and (max-width: 480px),
        screen and (max-device-width: 480px) {
        body {
        -webkit-text-size-adjust: 100%;
        line-height: 125%
        }
        #page .ec_item {
        padding-top: 0px;
        }
		#page .ec_item{
        padding-bottom: 10px;
        }
		#page .ec_img{
        padding-top: 0px;
        }
		.actionLinkContainer{
			padding-bottom: 10px;
		}
        #header_img {
        line-height: normal !important;
        }
        table[class*="mainTable"] img,
        td[id="content"] img,
        td[id="sidebarL"] img,
        td[id="sidebarR"] img {
        max-width: 100% !important;
        height: auto !important;
        }
        table[class*="mainTable"] p {
        margin: 0.5em 0 !important;
        }
        table[class="pageTable"],
        table[id="global_masthead"],
        table[id="main"],
        div[class="ec_attachments"] {
        width: 320px !important;
        }
        td[id="content"] {
        padding-bottom: 0 !important;
        }
        td[class*="textContent"],
        td[class*="textSide"] {
        line-height: 1.4 !important;
        font-size: 14px !important;
        }
        /**  * @section Mobile  */
        td.titleContent {
        /*@editable Headline Font Size*/
        font-size: 20px !important;
        line-height: 1 !important;
        height: auto !important;
        }
        /**  * @section Mobile  */
        td[class*="SubtitleContent"] {
        /*@editable Subtitle Font Size*/
        font-size: 18px !important;
        line-height: 1 !important;
        height: auto !important;
        /*@editable Subtitle Font Weight*/
        font-weight: normal !important;
        }
        /**  * @section Mobile  */
        td[class*="textContent"] {
        line-height: 1.4 !important;
        /*@editable Body Font Size*/
        font-size: 14px !important;
        line-height: 1 !important;
        height: auto !important;
        }
        /**  * @section Mobile  */
        td[class*="textContent"] a {
        line-height: 1.4 !important;
        /*@editable Link Font Size*/
        font-size: 14px !important;
        }
        /**  * @section Mobile  */
        div[class*="actionLinkContainer"] a {
        /*@editable Action Link Size*/
        font-size: 14px !important;
        /*@editable Action Text Color*/
        /*@important*/
        color: #00447A !important;
        /*@editable Link Underline*/
        text-decoration: underline !important;
        /*@editable Button Color*/
        /*@important*/
        background-color: transparent !important;
        /*@editable Corner-Radius*/
        /*@important*/
        border-radius: 2px !important;
        padding: 5px !important;
        }
        table[class*="sidebarOne"],
        table[class*="sidebarTwo"],
        table[class*="sidebarThree"],
        table[class*="sidebarL"],
        table[class*="sidebarR"] {
        padding: 5px 15px !important;
        border: 0 !important;
        width: 100% !important;
        }
        table[class*="sidebarL"] tr:first-child td img,
        table[class*="sidebarR"] tr:first-child td img {
        padding-bottom: 5px;
        }
        td[class*="main"] {
        padding-bottom: 5px !important;
        }
        /**  * @section Mobile  */
        td[class*="titleSide"] {
        /*@editable Sidebar Header Font Size*/
        font-size: 18px !important;
        line-height: 1 !important;
        height: auto !important;
        /*@editable Sidebar Header Font Weight*/
        font-weight: bold !important;
        }
        /**  * @section Mobile  */
        td[class*="textSide"] {
        line-height: 1.4 !important;
        /*@editable Sidebar Font Size*/
        font-size: 14px !important;
        line-height: 1.4 !important;
        height: auto !important;
        }
        /**  * @section Mobile  */
        td[class*="textSide"] a {
        line-height: 1.4 !important;
        /*@editable Sidebar Link Font Size*/
        font-size: 14px !important;
        }
        td[class*="spacer"],
        table[id="view_browser"] {
        display: none !important;
        }
        /**  * @section Mobile  */
        table[id="footer"] {
        /*@editable Footer Font Size*/
        font-size: 9px !important;
        }
        table[id="footer"] td {
        display: block !important;
        width: 100% !important;
        }
        table[id="footer"] td[class*="powered_by"] {
        text-align: center !important;
        font-size: 14px !important;
        }
        table[id="footer"] td[class*="powered_by"] img {
        width: auto !important;
        }
		table[id="footer"] a {
        text-decoration: none;
        }
		span[class="callout"]{
		font-size:30px!important;		
		}
		span[class="callout_2"]{
		font-size:20px!important;		
		}
			.tablet-button, .tablet-button td, .tablet-button a{
				height:40px!important;
				width:200px!important;
			}
        }
    </style>
    <!--[if lt IE 11]>  <style data="mobile-ie" data-condition="if lt IE 11" data-rule="@media only screen and (max-width: 480px), screen and (max-device-width: 480px)">  @media only screen and (max-width: 480px), screen and (max-device-width: 480px) {  ignore { rule-ignored: "why"; }  table[class*="mainTable"] img, img { max-width:320px !important;}  #header_img { width: 320px !important }  div.ec_attachments, table, tbody, tr, td { width:100% !important;}  }  </style>  <![endif]-->
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0" align="center" class="mainTable" width="100%">
        <tbody>
            <tr>
                <td>
					
                <table align="center" class="pageTable" width="600">
                    <tbody>
                        <tr>
                            <td>
                            
                            <table cellspacing="0" cellpadding="0" border="0" align="center" id="main">
                                <tbody>
                                    <tr>
										<td background="https://torahmates.org/email/2019/img/test-header.jpg" bgcolor="#00447A" valign="top" style="text-align:center; font-family: 'Open Sans', sans-serif; color: #ffffff; line-height: 32px; text-align:center;   padding:0 5% 100px;  background-size:cover; background-position:center center;">
									 <table width="83" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                          <tbody>
                             <tr>
                                <td valign="middle" width="166" style="padding: 10px 0 50px 0px; text-align:left;" class="logo">
                                   
                                      <div class="imgpop">
                                      <a href="http://www.oorah.org/events"><img src="https://torahmates.org/email/2019/img/events-logo-white.png" alt="oorah" width="83" height="65" /></a>
                                   </div>
                                </td>
                             </tr>
                          </tbody>
                       </table>
  
  						<table width="100%" cellspacing="0" cellpadding="0" data-block-group="main_column" class="ec_repeat">
                                                                    <tbody>
                                                                        
                                                                        
                                                                        
                                                                        <tr>
                                                                            <td valign="top" class="ec_item textContent">
                                                                            <p><span class="callout" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;  color:  #ffffff; font-size: 36px; text-align: center; font-weight:bold;  letter-spacing: 1px; display: block; line-height: 1.25;">You may be in the stands, but  you're one of the players.</span><br><span class="callout_2" style="font-size: 24px; line-height: 1.25; text-align: center; letter-spacing:.3px; font-family:'Open Sans', sans-serif; color:#fff;">Join over 100,000 in celebration of Torah Study at the 13th Siyum Hashas.
									 </span></p>
									
                                                                            </td>
                                                                        </tr>
                                                                      
                                                                        
                                                                        
                                                                    </tbody>
                                                                </table>
  
									 
    </div>
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top" class="ec_item textContent">
                                                                            <p style="line-height: 1.5; font-weight: normal; font-size:16px; font-family: 'Open Sans', Arial, Helvetica, sans-serif;">MetLife Stadium, New Jersey<br>Wednesday January 1, 2020 at 7:00 PM
			   </p>
									
									
                                                                            </td>
                                                                        </tr>
                                                                      
                                                                        
                                                                        
                                                                    </tbody>
                                                                </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    </td>
                                                </tr>
												
												<tr>
                                                    <td valign="top" id="content" style="background-color:#00447A!important;">
                                                    <table cellpadding="0" cellspacing="0" border="0" text-align:center; font-size: 18px; color: #000; line-height: 24px; background-color:#00447A!important; letter-spacing:.3px;>
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                <table width="100%" cellspacing="0" cellpadding="0" data-block-group="main_column" class="ec_repeat">
                                                                    <tbody>
                                                                        
                                                                        
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top" class="ec_item textContent">
                                                                            <p style="padding:0px 0px 20px; font-style: italic; color:#fff;"><span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; ">Don't miss this once in 7 years event! Reserve your free seats now before they go on sale to the public!</span><br> 
								  </p>
																				
																				<table height="50" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
                                                              <tbody>
                                                                 <tr>
                                                                 	
                                                                    <td width="auto" align="center" valign="middle" height="50" style=" border:solid medium #ffffff; font-size:20px; font-weight:bold; font-family:'Open Sans', Arial, Helvetica, sans-serif; text-align:center; width:275px;  line-height:16px; ">
                                                                    
                                                                       
                                                                          <a class="action" style="font-weight:bold; height:50px; width:275px; color: #ffffff; text-align:center;text-decoration: none; padding:9px 0; letter-spacing: 1px;" href="https://www.oorah.org/siyum/">RESERVE FREE SEATS</a>
                                                                       
                                                                    </td>
                                                                 </tr>
                                                              </tbody>
                                                           </table>
								                                    </td>
                                                                        </tr>
																		
																		
                                                                      
                                                                        
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    </td>
                                                </tr>
												
												<tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
												
												
                                                <tr>
                                                    <td>
                                                    <table width="100%" cellspacing="0" cellpadding="0" data-block-group="two_column" class="ec_repeat twoColumn">
                                                        <tbody>
															<tr>
                                                                            <td valign="top" class="ec_item textContent" >
                                                                            <p style="line-height: 1.5; font-weight: bold; font-size:16px; font-family: 'Open Sans', Arial, Helvetica, sans-serif;">Photos from the 12th Siyum HaShas
			   </p>
									
									
                                                                            </td>
                                                                        </tr>
															<tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                            <tr>
                                                                <td valign="top">
																	
																	
                                                                <!--[if (gte mso 9)|(IE)]>
                                  <table width="600" align="center">
                                  <tr>
                                  <td width="450">
                                  <![endif]-->
                                                                <table cellspacing="0" cellpadding="0" class="sidebarL col_L" align="left">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td valign="middle" align="center"> <img alt="Item 1" src="https://torahmates.org/email/2019/img/test-2.jpg" class="ec_img ec_defaultimg" data-width="270" /> </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="middle" class="ec_item titleSide">
                                                                            <p>Zoniac at the Siyum</p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="ec_item textSide">
                                                                            <p style="text-align:center;">Provide a brief description of your product or item here to inform your customers.<br />
                                                                            </p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top">
                                                                            <div class="actionLinkContainer"> <a class="ec_anchor ec_edit_small" href="http://www.example.com/">
                                                                            <span class="ec_item ec_edit_small ecaction_edit">READ MORE</span></a> </div>
                                                                            </td>
                                                                        </tr>
                                                                        
                                                                    </tbody>
                                                                </table>
                                                                <!--[if (gte mso 9)|(IE)]>
                                  </td>
                                  <td width="150">
                                  <![endif]-->
                                                                <table cellspacing="0" cellpadding="0" class="sidebarR col_R" align="left">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td valign="middle" align="center"> <img alt="Item 2" src="https://torahmates.org/email/2019/img/test-1.jpg" class="ec_img ec_defaultimg" data-width="270" /> </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="middle" class="ec_item titleSide">
                                                                            <p>HaRav Malkiel and Schottenstein</p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="ec_item textSide">
                                                                            <p style="text-align:center;"">Provide a brief description of your product or item here to inform your customers.<br />
                                                                            </p>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td valign="top">
                                                                            <div class="actionLinkContainer"> <a class="ec_anchor ec_edit_small" href="http://www.example.com/">
                                                                            <span class="ec_item ec_edit_small ecaction_edit">READ MORE</span></a> </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                                <!--[if (gte mso 9)|(IE)]>
                                  </td>
                                  </tr>
                                  </table>
                                  <![endif]-->
                                                                </td>
                                                            </tr>
															
                                                        </tbody>
                                                    </table>
                                                    </td>
                                                </tr>
												<tr>
                                                                            <td class="spacer">&nbsp;</td>
                                                                        </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                        </td>
                                    </tr>
							
                                    <tr>
                                        <td>
                                        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="ec_item" id="footer">
                                            <tbody>
                                                <tr>
                                                    <td valign="top" class="ec_item textContent">
														<p><a href="https://www.oorah.org">www.oorah.org</a><br />
                                                    <a href="tel:+17327301000">732.730.1000</a> | <a href="mailto:oorah@oorah.org">oorah@oorah.org</a></p>
                                                    </td>
                                                </tr>
                                                <tr width="100%">
                                                    <td align="center">
														<a href="https://www.facebook.com/oorah/">
															<i style="color:#fff; padding:3px;" class="fab fa-facebook fa-2x"></i></a>
														<a href="https://twitter.com/oorah">
															<i style="color:#fff; padding:3px;" class="fab fa-twitter fa-2x"></i></a>
														<a href="https://www.instagram.com/oorahinc/?hl=en">
															<i style="color:#fff; padding:3px;" class="fab fa-instagram fa-2x"></i></a>
														<a href="https://www.youtube.com/user/OorahKR">
															<i style="color:#fff; padding:3px;" class="fab fa-youtube fa-2x"></i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>

@FernandoMRestelli
Copy link

@people
@philipp-klinz

Thank you for THE Solution!

@JemarJones
Copy link

You're the real MVP 🤗

@arturmamedov
Copy link

Isn't better use table and td?

@jonasgroendahl
Copy link

jonasgroendahl commented Apr 6, 2021

love it, thanks @elidickinson

still works after 8 years

@haoksam
Copy link

haoksam commented Jul 5, 2021

Great solutions everyone! Although none of them can stand the normal text mixed with super long words (or just text with no spaces). Windows Mail/Outlook (2007, 2010, 365) keep stretching the table...
NB: break-all and hyphens wouldn't help since the first will break normal words, and the later will brake the links.

@leGnacq
Copy link

leGnacq commented Oct 1, 2021

@philipp-klinz Great job this works perfectly to center object without center text.
If someone want to center object and text, simply use style="text-align:center;.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment