Html Emails - Outlook 2010 - Table Align Issue - html-email

Question

I have two tables aligned left at 30% each so that when it goes responsive the change to 100% and stack underneath each other.
Problem is as per the screenshot below the second one has a gap at the top and i have no idea why?
My snippet of code is here
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen"> <p><span>1</span> FIRST AND LAST NAME</p>
<hr>
<p><span>2</span> FIRST AND LAST NAME</p>
<hr>
<p><span>3</span> FIRST AND LAST NAME</p>
<hr>
<p><span>4</span> FIRST AND LAST NAME</p>
<hr>
<p><span>5</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen">
<p><span>6</span> FIRST AND LAST NAME</p>
<hr>
<p><span>7</span> FIRST AND LAST NAME</p>
<hr>
<p><span>8</span> FIRST AND LAST NAME</p>
<hr>
<p><span>9</span> FIRST AND LAST NAME</p>
<hr>
<p><span>10</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
Outlook 2010 - Screenshot

Answer 1

Doesn't look like the same code from the screenshots, background colors are missing and fonts as well. Either way I think you need a ghost column between the tables to align, try the code below:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen"> <p><span>6</span> FIRST AND LAST NAME</p>
<hr>
<p><span>7</span> FIRST AND LAST NAME</p>
<hr>
<p><span>8</span> FIRST AND LAST NAME</p>
<hr>
<p><span>9</span> FIRST AND LAST NAME</p>
<hr>
<p><span>10</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="50%">
<![endif]-->
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen">
<p><span>6</span> FIRST AND LAST NAME</p>
<hr>
<p><span>7</span> FIRST AND LAST NAME</p>
<hr>
<p><span>8</span> FIRST AND LAST NAME</p>
<hr>
<p><span>9</span> FIRST AND LAST NAME</p>
<hr>
<p><span>10</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
You can change the width of the ghost column if you need to. let me know how you go.