Windows live mail размещает все таблицы в 1 ряд, вместо друг друга

Question

Изменить: добавлен пример ниже.

У меня есть следующий код (например, упрощенный), который я отправляю в качестве бюллетеня:

<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>

Ожидаемый результат:
[------ table 700 ------]
[ table 350 ][ table 350 ]

Результат в Почте Windows Live: (нормально работает в Почте Mac)
[------ table 700 ------][ table 350 ][ table 350 ]

Это все в 1 строке, хотя TD и таблица обтекания установлены на 700, я ожидаю, что это начинается с новых строк.

Я не могу добавить разрывы, это динамический код, у меня есть больше частей, и я не знаю в коде, который является последним в строке.

Я не могу найти темы по этому поводу, кроме как "начать отправку писем с таблицами"- новичок решения.

Кто-нибудь понял?

Answer 1

Проблема / решение использует align="left", Любой стол с align=left будет прикреплен следующий стол к нему. Пример предпочтительного результата:

[---- 100 ----]
[--50--][--50--]
[25][25][25][25]

Если все эти таблицы имеют align="left", это приведет к одной длинной строке:

[---- 100 ----][--50--][--50--][25][25][25][25]

Я удалил align=left из первой таблицы, которая выглядит следующим образом:

[---- 100 ----]
[--50--][--50--][25][25][25][25]

Я не могу удалить align=left из других таблиц, потому что я хочу эти inline-block. Чтобы получить их правильно, я добавил в свой код разделение. Сплит-стол - это стол без align=left и нет высоты. Все столы имеют align=leftкроме раскола:

[---- 100 ----](split)
[--50--][--50--](split)
[25][25][25][25]

Answer 2

Добавлять style="display:block;" на ваш верхний стол.

Однако вам лучше положить их в свои <td> вместо того, чтобы плавать / выравнивать их там.

Как это:

<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>

Здесь аналогичный вопрос / ответ, который объясняет другую проблему, с которой вы, вероятно, столкнетесь при выравнивании таблиц, как у вас.

Если вы пытаетесь реагировать, вы можете использовать <td> с display:block; вместо этого, чтобы сделать их "всплывающими" при срабатывании медиазапроса. Пример здесь