Windows live mail places all tables in 1 row, instead beneath eachother - php

Question

Edit: Added example below.
I have the following code (simplified for example) which I send as newsletter:
<table width="700">
<tr>
<td width="700"><!-- Really trying to set 700 as max) -->
<table width="700"> <!-- simple table content, not bigger than 700 --></table>
<table width="350"> <!-- simple table content, not bigger than 350 --></table>
<table width="350"> <!-- simple table content, not bigger than 350 --></table>
</td>
</tr>
</table>
Expected result:
[------ table 700 ------]
[ table 350 ][ table 350 ]
Result in Windows Live Mail: (working fine in Mac's Mail)
[------ table 700 ------][ table 350 ][ table 350 ]
It's all in 1 row, though the wrapping TD and table are set to 700, I'm expected it starting on new lines.
I can not add breaks, this is dynamic code, I have more parts, and I dont know in the code which is the last of a line.
I can't find topics about this, other than "start sending mails, with tables"-novice solutions.
Anyone got a clue?

Answer 1

The problem/solution is using align="left". Any table with align=left will have the next table stuck to it. Example of prefered result:
[---- 100 ----]
[--50--][--50--]
[25][25][25][25]
If all those tables have align="left", it would result in one long line:
[---- 100 ----][--50--][--50--][25][25][25][25]
I removed the align=left from the first table, which results like this:
[---- 100 ----]
[--50--][--50--][25][25][25][25]
I can'r remove the align=left from the other tables, because I want those inline-block. In order to get them properly, I added a 'split' in my code. The split-table is a table without the align=left and no height. All tables haves align=left, apart from the split:
[---- 100 ----](split)
[--50--][--50--](split)
[25][25][25][25]

Answer 2

Add style="display:block;" to your top table.
However you'd be better off putting them into their own <td>'s instead of float/aligning them there.
Like this:
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#eeeeee">
...
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="350" bgcolor="#cccccc">
...
</td>
<td width="350" bgcolor="#dddddd">
...
</td>
</tr>
</table>
</td>
</tr>
</table>
Here is a similar question/answer here that explains another issue you'd likely face with aligning tables like you have.
If you are trying to go responsive, you can use <td>'s with display:block; instead to make them 'pop' down when the media query triggers. Example here