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

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?

For the few actually viewing this page, it has something to do with `align="left"`. I remove that, everything drops beneath eachother. — Martijn, Mar 31 '14 at 09:23

score 1 · Accepted Answer · answered Mar 31 '14 at 10:43

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]

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

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

edited May 23 '17 at 11:53

Community

1
1

answered Mar 28 '14 at 14:09

John

11,985
3
45
60

It's not responsive. Im only talking about windows live mail, all others are find. I agree with the `wrap in td's` solution, but that simple isn't an option, the parts are dynamic in the sense that I the order could shuffle. Im going to try the block trick, ill let you know – Martijn Mar 28 '14 at 14:14
Giving the table `display:block;` has no influence whatsoever – Martijn Mar 28 '14 at 14:35
I just noticed have a typo in the parent `` - you have `with` not `width`, which could be the cause. – John Mar 28 '14 at 15:00
I double checked, only in this example :) The original code is fine – Martijn Mar 28 '14 at 15:07
I'm surprised the `display:block;` didn't work. Try adding `align="left"` to the tables also. This should overflow them. If that doesn't work, option B in the code demo I posted will definitely work. That is the most consistent way to do it in html email. – John Mar 28 '14 at 15:33
I never noticed, I'm allready using `align="left"` in all the blocks, and the table which containts the parts – Martijn Mar 31 '14 at 08:35

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

2 Answers2