I have the following code in a html email:
<table style="margin: 32px 0; border: 0; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Invoice Number</td>
<td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;"></td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Tax Point</td>
<td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">30/11/2017 11:48:32</td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Payer ID</td>
<td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Senior Internet</td>
</tr>
</table>
<table class="invoice-items">
<tr>
<th style="font-family: sans-serif; padding: 10px;">Description</th>
<th style="font-family: sans-serif; padding: 10px;">Item Amount</th>
<th style="font-family: sans-serif; padding: 10px;">Quantity</th>
<th style="font-family: sans-serif; padding: 10px;">VAT Amount</th>
<th style="font-family: sans-serif; padding: 10px;">Line Total</th>
</tr>
<tr>
<td style="padding: 10px;">Charity/ public sector</td>
<td style="padding: 10px;">360.0000</td>
<td style="padding: 10px;">1</td>
<td style="padding: 10px;">72.0000</td>
<td style="padding: 10px;">360.0000</td>
</tr>
<tr>
<td colspan="3" class="empty"> </td>
<td class="no-border">Total</td>
<td class="green no-border">£432.0000</td>
</tr>
</table>
However, I am having an issue with the cell height of the first table coming out far too large. I've tried setting padding, borders, line heights, I just can't get the red cells to be the height of the text within them.
It's something about the CSS you're using or the email client, your code is working properly here, checkout how it is rendered in plain HTML file:
Check out this answer for testing HTML templates:
https://stackoverflow.com/a/1019166/4129382
Related
we are tryin to make modify an email for making it work in outlook and media# don't seem to work. im out of idea,
this doesn't seem to work to
here the base model i took for outlook specification with css but it don't seems to work
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
soo i tried simple test with changing the background color first with a nice looking red
but it doesn't seem to actually do something. i don't realy know what i can do
<!--[if mso]>
<style>
.table {
background-color : red !important;
}
.body {
background-color : red !important;
}
</style>
<![endif]-->
</head>
<body
class="clean-body"
style="
margin: 0 auto;
padding: 0 auto ;
-webkit-text-size-adjust: 100%;
color-scheme: light only;">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
background="https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png" width="600" height="auto"
style="
max-width: 600px;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-image: url('https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png'); width:600px; display: block;
background-color : rgb(33, 34, 34);
color-scheme: light only;
width: 100%;
color: #ffffff;
font-family: 'Roboto', sans-serif;
top : -50px;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td style="min-width: 180px; width: 210px; padding-bottom: 37px;">
<table style="margin: 0; padding: 0">
<tbody>
<tr>
<td
style="
padding-left: 42px;
padding-bottom: 1px;
min-width: 83px;
padding-top: 40px;
padding-right: 0px;
"
>
<table>
<tbody>
<tr>
<td style="min-width: 180px">
<div
style="
font-size: 15px;
font-weight: 800;
line-height: 1;
color:rgb(126, 122, 122);filter: brightness(100);
"
>
Inès AZUELOS
</div>
</td>
</tr>
<tr>
<td>
<div
style="
font-size: 13px;
font-weight: 600;
padding-top: 5px;
padding-left: 1px;
color: #3399ff;"
>
Direction - Assistante
</div>
</td>
</tr>
<tr>
<td style="
padding-top: 16px;
padding-left: 2px;
color:rgb(126, 122, 122);filter: brightness(100);
font-size: 13px;
font-weight: 600;"
>
EICIAM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="
padding-left: 41px;
padding-bottom: 2px;
padding-right: 0px;
padding-top: 15px;
min-width: 83px;
"
>
<table>
<tbody>
<tr>
<td alt="logo facebook" title="logofacebook" style="padding: 3px; width : 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block;border :0;"/>
</td>
<td alt="logo linkedin" title="logolinkedin" style="padding: 3px; width: 20px; height: 20px;">
<img style="width: 20px; height: 20px; display: block; border :0;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<!-- --------------------- -->
<td style="padding: 33px 0 0 0; width: 226px; margin-left: 5px ">
<table>
<tbody>
<tr>
<td style="border-left: 1px solid #ffffff67; padding: 7px 0 0 19px;">
<table
style="
font-size: 11px;
color: #212222;
letter-spacing: 0.7px;
"
>
<tbody>
<tr>
<td style="min-width: 170px">
<table>
<tbody>
<tr>
<td alt="phone" title="phone" style="min-width: 19px; padding-top: 2px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td href=""style="color:rgb(126, 122, 122);filter: brightness(100%); padding-top: 5px; padding-left: 10px; font-size: 12px;"> </td>
</tr>
<tr>
<td alt="mail" title="mail" style="padding-top: 13px; width: 20px; height : 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px; font-size: 12px;">
<a href="" style="color:rgb(126, 122, 122);filter: brightness(100);" > </a>
</td>
</tr>
<tr>
<td alt="web" title="web" style="padding-top: 12px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border: 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px;font-size: 12px;">
eiciam.fr
</td>
</tr>
<tr>
<td alt="print" title="print" style="padding-top: 15px;width: 20px; height: 20px; display:inline; border:0;">
<img style="width: 20px; height: 20px; display: block; border :0;" onerror="this.src=';"/>
</td>
<td style="padding-top: 16px; padding-left: 10px">
<a style="color:rgb(126, 122, 122);filter: brightness(100); font-size: 9px" style="color: white;"> N'imprimez que si nécessaire </br> Pensez à l'environnement</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td alt="" title="" style="min-width: 50px; width: 100px; height: 100px; border:0;">
<img src="" style="min-height: 50px; min-width: 50px; width: 100px; height: auto; display: block; border: 0;margin-top: 50px;"/>
</td>
<!-- ------------------------------ -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
The media element is not supported. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The fact is that Outlook uses Word as an editor and rendering engine for message bodies.
I have placed the image but it breaks when we resize the window.
I want it in the center of the first column which is description below the email service.
I want it to remain in the center all the time.
I have given the td position relative and made the image absolute position. Its relative to the td................................
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position: relative">Email Service
<img style="position: absolute; left: 300px; top: 70px;" src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
Wrap the text and the image inside a div with a flex box property, and then you can center it as you like
* {
font-family: sans-serif;
}
table{
width: 100%;
border: 1px solid #edf2fc;
border-collapse: collapse;
margin-top: 30px;
}
table th {
padding: 11px 6px 11px 6px;
word-break: break-all;
background: #413fa4;
color: #fff;
text-align: center;
}
tr td {
border: 1px solid #cbdaf1;
}
table tbody td {
text-align: center;
padding: 33px 0 33px 0;
word-break: break-all;
font-size: 18px;
}
tfoot tr td {
padding-top: 4px;
padding-bottom: 4px;
}
tfoot tr td:first-child{
padding-right: 22px;
}
.gray {
background-color: lightgray
}
.flex-b {
display:flex;
align-items:center;
justify-content:center;
}
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex-b">
<span>Email Service</span>
<img src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
</div>
</td>
<td align="center">1400.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Subtotal</td>
<td align="center">1635.00</td>
</tr>
<tr>
<td align="right">Tax</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Discount</td>
<td align="center">294.3</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="center" class="gray">$ 1929.3</td>
</tr>
</tfoot>
</table>
I am trying to overwrite a td style like this:
.valuator .sw-slots table, tr, td { width 100% }
so I did this:
td.license-name-td{
width: 100px !important;
}
The table took always the "global" style and overwrites, rather ignores my style. Even chrome doesn't cross the link out, it just ignores that part.
td.license-name-td {
width: 100px !important
}
.valuator .sw-slots table, tr, td {
width: 100%;
}
(Chrome computed css output)
Is there a special way to overwrite the td tag afterwards?
.valuator .sw-slots table, tr, td {
width: 100%;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-collapse: collapse;
border-spacing: 0;
text-align: right;
color: #3c3c3c;
}
table.license-table td.license-name-td {
text-align: left !important;
word-break: break-word;
overflow: hidden;
width: 100px !important;
}
table.license-table td.license-td {
text-align: left !important;
margin-left: 3px;
word-break: break-word;
}
<table class="t3lsg license-table" style="font-size: 12px;">
<tbody><tr>
<th style="text-align: left;">Software</th>
<th style="text-align: left;">Version</th>
<th style="text-align: left;">Source</th>
<th style="text-align: left;">License</th>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">Fleck</td>
<td class="license-td">0.9.6.19</td>
<td class="license-td">https://github.com/statianzo/Fleck</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">HTML Agility Pack</td>
<td class="license-td">HAP 1.4.6</td>
<td class="license-td">http://code.google.com/p/heartcode-canvasloader/</td>
<td class="license-td">Microsoft Public License </td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery</td>
<td class="license-td">1.10.2002</td>
<td class="license-td">http://jquery.com</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery Knob</td>
<td class="license-td">11.2.8</td>
<td class="license-td">http://anthonyterrien.com/knob</td>
<td class="license-td">MIT License</td>
</tr>
</table>
EDIT: I changed one mistake, that i forgot to change one inline style to a class, now this is the new result.
First, in your example code, I added the two enclosing div's (.valuator, .sw-slots) so that the first CSS rule applies to the table.
After that, you need to make sure that the widths of the table cell are set to a default of auto except for td.license-name-td which had a 100px width.
You need to reset the td for the separator td[colspan="4"] to width: auto and then the same for td.license-td.
I think this is what you need. Just be on the look out for other CSS rules that might be in hour style sheets that might override these.
.valuator .sw-slots table, tr, td {
width: 100%;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-collapse: collapse;
border-spacing: 0;
text-align: right;
color: #3c3c3c;
}
td[colspan="4"] {
width: auto;
}
td.license-name-td {
text-align: left;
word-break: break-word;
overflow: hidden;
width: 100px;
background-color: lightblue;
}
td.license-td {
text-align: left;
margin-left: 3px;
word-break: break-word;
width: auto;
}
<div class="valuator">
<div class="sw-slots">
<table class="t3lsg" style="font-size: 12px;">
<tbody>
<tr>
<th style="text-align: left;">Software</th>
<th style="text-align: left;">Version</th>
<th style="text-align: left;">Source</th>
<th style="text-align: left;">License</th>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">Fleck</td>
<td class="license-td">0.9.6.19</td>
<td class="license-td">https://github.com/statianzo/Fleck</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">HTML Agility Pack</td>
<td class="license-td">HAP 1.4.6</td>
<td class="license-td">http://code.google.com/p/heartcode-canvasloader/</td>
<td class="license-td">Microsoft Public License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery</td>
<td class="license-td">1.10.2002</td>
<td class="license-td">http://jquery.com</td>
<td class="license-td">MIT License</td>
</tr>
<tr>
<td colspan="4">
<div style="height: 1px; background-color: lightgrey; margin: 3px 0 3px 0;">
</div>
</td>
</tr>
<tr>
<td class="license-name-td">jQuery Knob</td>
<td class="license-td">11.2.8</td>
<td class="license-td">http://anthonyterrien.com/knob</td>
<td class="license-td">MIT License</td>
</tr>
</table>
</div>
</div>
i've added a class name to my table and changed the class names to:
table.license-table td.license-td{
text-align: left !important;
margin-left:3px;
word-break: break-word;
width: 100px !important;
}
table.license-table td.license-name-td{
text-align: left !important;
word-break: break-word;
overflow: hidden;
width: 100px !important;
}
this solves my problem.
The problem is that the width: 100% also applies to the table. And because a all cells in a row must count up to the width of the table, it will not work to just restrict the width of the cell, you also must address the table, or the other cells in the row.
I do not know what your HTML looks like, but if the cell is the only one in the row, you could add a class to the table instead of the cell and set the width of the table to 100px in the same way as you did for the cell, you do not have to restrict the width of the cell than, as that will be automatically.
I'm creating an e-mail template to send out but for some reason, I am unable to create two simple columns in the footer area.
Layout:
Code:
<div style="width: 100%; height: 100%;">
<table style="margin: 0px auto 0px auto; padding: 20px 20px 20px 20px; font: normal 10.5px; color: #777777; width: 100%; height: 100%;" align="center">
<tbody>
<tr>
<td>
<table class="content" style="background: none repeat scroll 0% 0% #FFFFFF; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="display: inline-block; width: 100%; background: #1F1F1F;" bgcolor="#1F1F1F">
<td style="width: 100%;" align="left" valign="middle">
<h1 style="padding: 15px 15px 15px 15px; color: #FFFFFF;">Test</h1>
</td>
<td style="border-left: 1px solid #FFFFFF;" align="right">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>
How do I modify the above code to create two simple columns in the footer area, that is still within the e-mail's container?
You should make simple structure of html,
Don't make table in table. You can use rowspan. HTML <th> rowspan Attribute
cells in thead tag, recommend to use th tag HTML <thead> Tag
Don't use this style display:inline-block; on tr tag
Put color style on tr tag if cells doesn't have different color
<div style="width: 100%; height: 100%;">
<table class="content" style="background: none; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="width: 100%; background: #1F1F1F;color: #FFFFFF;">
<th style="width: 100%;" align="left" valign="middle" rowspan=2>
<h1 style="padding: 15px 15px 15px 15px;">test</h1>
</th>
<th style="border-left: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;text-decoration: none;text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
<tr style="width: 100%; background: #1F1F1F;color: #ffffff; ">
<th style="border-left: 1px solid #FFFFFF;text-decoration: none; text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2">
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
</tbody>
<tfoot>
<tr style="width: 100%; background: #1F1F1F; color: #ffffff;">
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</div>
jsfiddle
Hi I am having problem with outlook not centering my table part.
it consists of two columns which are left aligned.They are centering in gmail and outlook on desktop but not on mobile.I guess that align left in two columns is giving me an issue.Please help me out.
<table border="0" cellpadding="0" cellspacing="0" align="center" style="padding:0 0 0 10px;">
<tr>
<td align="center" class="middle">
<div align="center">
<center>
<!--[if mso]>
<table style="width: 300px;"><tr><td>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" height="158" bgcolor="#006699"><tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
<img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
</tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" bgcolor="#0093d4" height="158px"><tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email: </td>
<td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">EPM_columbia#eruditus.com</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone: </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
</table>
</td> </tr>
</table>
</center>
</div>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600" class="content" style="border-collapse: collapse; width: 100%; max-width: 600px;">
<tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr>
<tr><td style="font-family:Arial, Helvetica, sans-serif; color: #666666; padding: 0;" align="center" class="responsive-image">
<a href="http://www.eruditus.com/programmes/columbia/columbia-mc.html" style="display: block; margin: 0 auto;" target="_blank">
<img src="http://www.eruditus.com/emailer/0419_columbia/clickhere.png" align="middle" width="277" height="58" alt="click_program" style="display: block; max-width: none !important; margin: 0 auto;" /></a>
</td>
</tr></table></td>
</tr><tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr></table><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
What you'll want to do is use a Media Query to check whether the screen size is less than a certain size to display responsive layouts. e.g:
#media only screen and (max-width: 500px;) {
//Responsive CSS styling
}
Using this you can center those tables as you would with a normal webpage. e.g:
#media only screen and (max-width: 500px;) {
td[class="responsive-align"] {
margin: 0 auto !important;
float: none !important;
align: center !important; //If this line centers your text, remove it.
}
}
Email clients are very pedantic, and take a long time to understand what you can do with each one, and what their limits are.
From my experience with responsive designs and Outlook especially you need to lay out your tables like this for them to drop down effectively:
<table align="left">
<tr>
<td>
</td>
</tr>
</table>
<table align="right">
<tr>
<td>
</td>
</tr>
</table>
With Outlook, it's best to make sure you have 5px or larger in between the two tables so that it can add it's own spacing in (That you can't do anything about). So, for a table of 600px width, you'd have each of your tables with a width of 295px for a good enough amount of spacing.
Hope this helps :)