MV
1
Alignment Issue With Table (Responsive)
Hi there,
I have a problem with 3 tables alignment.
Here is my source code :
<table class="inner" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td>
<table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
...........
</table>
<table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
...........
</table>
<table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
...........
</table>
</td>
</tr>
</table>
On smartphone, the 3 tables are on the left, I would like them on center. If I write align="center", I don't have the 3 tables on the same line.
Here is the previews : https://litmus.com/pub/0cb2649
Thanks in advance for your help.
Gregg
Hi Marie,
What styles are within your 3cols class? Could you share these?
Could it be something you can add to your css. So it is left normally but on your mobile css it is centered?
On the parent
<td>change it to<td style="text-align:center; font-size:0">Wrap each of your tables in a
<div>. Make it<div style="display:inline-block>Inbetween each
<div>add VML markup like so<!--[if (gte mso 9)|(IE)]></td><td align="left" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><![endif]-->MAKE SURE THERE ARE NO SPACES IN BETWEEN THE CODE WHERE THE DIV's MEET EACH OTHER! This wil break as inline-block creates 4px spaces on the right side if there are any spaces.
If you need to wrap a VML table around your main table in order to keep it's structure in outlook.
Should work. Let me know how you get on