Menu
I am trying to float: left some tables, but just encountered a major problem, outlook doesn't support float. Well, then I tried to use table align and so forth, but without luck. The tables just show up, under each other, instead of beside each other. Anything one can do about this?
PS: it works on other devices just fine, its only Outlook, and I can't give each table a td, since it will break some other stuff.
markup:
<table class="products">
<tr>
<td align="left" class="test">
<!-- Product 1 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 2 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 3 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<span class="clear"></span>
</td>
</tr>
</table>
613
Just put every sub-table into an own td of the outer table. as the td's are besides each other, the tables will be too.
When trying to create HTML-EMails, Code like it’s 1997.
75
Set your widths on each aligned table using width="", not CSS.
An example that works:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
table td { border-collapse: collapse; }
.msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
</style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div style="max-width:640px !important;">
<table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
<tr>
<td width="15" bgcolor="454545"> </td>
<td width="290" bgcolor="454545" align="left" style="padding: 0px;"> <br>Table 1<br>...<br>
</td>
<td width="15" bgcolor="454545"> </td>
</tr>
</table>
<table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
<tr>
<td width="15" bgcolor="959595"> </td>
<td width="290" bgcolor="959595" align="left" style="padding: 0px;"> <br>Table 2<br>...<br>
</td>
<td width="15" bgcolor="959595"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body></html>
Also, Outlook puts a 4-5 pixel gap between the aligned tables. Adding this trims it down to about 1px:
<style type="text/css">
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
</style>
To get rid of it completely, you'll have to add borders to your tables (another Outlook quirk hack).
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
