Отображение ячеек таблицы нулевой ширины в Outlook

во-первых:
Я ненавижу перспективы :)

вот почему:
Я пытаюсь отправить электронное письмо со следующей структурой (это просто упрощенный пример, поэтому, пожалуйста, не говорите мне "просто избавьтесь от середины tds")

<table width="400">
  <tbody>
    <tr>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
       <td width="0"></td>
       <td width="0"></td>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
    </tr>
  </tbody>
</table>

проблема в том, что два tds в середине приводят к пространству между двумя изображениями, как вы можете видеть на этом скриншоте http://i48.tinypic.com/6i8rvk.png

Я чувствую, что я уже перепробовал все возможные.

  • cellpadding = 0, cellspacing = 0, граница = 0 по таблице
  • установка ширины каждого td с помощью встроенного css
  • добавление border-collapse: свернуть ко всем tds и таблице
  • добавление поля: 0, заполнение: 0; граница 0; ко всем tds во встроенном css
  • установка размера шрифта и высоты строки в 0 inline в CSS

ничего не получалось.

побочные Примечания:
Если в середине есть только одна пустая ячейка таблицы, рендеринг будет прекрасным. Так что кажется, будто каждый td приходится только на половину пикселя
Это уже упрощенный пример, и я не могу изменить структуру таблицы, что означает, что мне нужно найти обходной путь для проблем рендеринга, а не фиксировать довольно некрасивый стиль кодирования к сожалению.

тестирование
Вот моя среда тестирования-не стесняйтесь играть с ней:http://putsmail.com/d58ffa01c4b3e29123baab00754716

7
email email-client html-email outlook outlook-2010

5 ответов

попробуйте поместить padding-left и / или padding-right в tds, содержащий изображения, как встроенный css.

последнее редактирование: попробуйте это --

<tr> <td style="border-collapse: collapse; margin:0;padding:0; border:0" align="right" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td> <td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td> <td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td> <td style="border-collapse: collapse; margin:0;padding:0; border:0" align="left" ><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>

Я удалил ширину из tds, содержащих изображения, поэтому она принимает ширину изображений по умолчанию.

3

Outlook не любит скрывать контент ; -) но что должно работать - добавьте условный код:

              <table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed">
                <tr>
                  <td style="width:217px" valign="top">
                    column 1
                  </td>
                  <!--[if !mso]><!--><td style="line-height:0;max-height:0;width:0;overflow:hidden;font-size:0;display:none" valign="top">
                    hidden column 2
                  </td>
                  <!--<![endif]--><td valign="top">
                    column 3
                  </td>
                </tr>
              </table>

чтобы скрыть его от outlook, комментарии вокруг столбца с помощью [!mso/ endif] достаточно. Однако вы можете захотеть спрятаться также в outlook.com, gmail.com и некоторые другие-для этого включены другие стили. Не забудьте восстановить настройки в mobile view с помощью медиа-запросов.

может быть, вы хотите, чтобы проверить https://responsive.электронная почта которая генерирует этот код для вас.

удачи Олег!--2-->

2

вы пробовали поставить <td>s на одной линии? То есть, удаление linebreak между элементами?

(внутренние элементы linebreaks игнорируются)

<td>Foo
</td><td>
Bar</td>
1

помогает ли "display: none"?

<table width="400">
  <tbody>
    <tr>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
       <td width="0" style="display:none"></td>
       <td width="0" style="display:none"></td>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
    </tr>
  </tbody>
</table>

кстати, я не страдал вашей проблемой в Outlook 2003, поэтому я не могу ее проверить.

0

Я продолжал пытаться решить эту проблему -ничего (Я пробовал каждое предложение здесь и многое другое) работал.
В конце концов я пошел более сложным, но и самым чистым способом, который я считаю, и написал сценарий, который удаляет все пустые столбцы и все пустые строки с преобразованием xsl. Сейчас он работает в Outlook 2003 - 2010.

0