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

Во-первых:
я ненавижу 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>

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

Такое ощущение, что я уже все перепробовал.

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

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

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

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


email outlook email-client html-email outlook-2010
person Horen    schedule 12.09.2012    source источник

Ответы (5)


arrow_upward
3
arrow_downward

попробуйте поместить 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, содержащего изображения, поэтому он принимает ширину изображений по умолчанию.

person Teena Thomas    schedule 13.09.2012
comment
Я уже сделал это - putmail.com/d58ffa01c4b3e29123baab00754716 Это не работает. - person Horen; 14.09.2012
comment
я поместил padding-right: 10px в первый <td> в вашей тестовой среде, и это выглядит нормально. это не работает на аутлуке? - person Teena Thomas; 14.09.2012
comment
Я тестировал вышеуказанное для Outlook 2003, 2007 и 2010, все выглядит хорошо. Я использую getResponse.com для тестирования различных почтовых клиентов, это бесплатно :) - person Teena Thomas; 14.09.2012
comment
Можете выложить исходный код, который работал? Я хотел бы протестировать его и увидеть в действии в моей установке Outlook :) - person Horen; 14.09.2012
comment
Хорошо, с этим кодом есть пара проблем: 1. Я пытаюсь устранить пробел между двумя изображениями, поэтому я действительно не хочу устанавливать отступ в 10 пикселей, 2. вы удалили два пустых td в средний - без них проблем нет (я знал это с самого начала). В заключение это решает мою проблему вообще - person Horen; 14.09.2012
comment
Могу я спросить, зачем нужны tds шириной 0? - person Teena Thomas; 14.09.2012
comment
это данная структура, на которую я не могу повлиять. Я хотел бы просто избавиться от них, но поскольку код генерируется автоматически и на самом деле намного, намного сложнее, чем мой упрощенный пример, их невозможно просто удалить. Так что мне нужно найти обходной путь. - person Horen; 14.09.2012
comment
это последнее редактирование сработало? Если да, могу ли я получить награду, пожалуйста :) - person Teena Thomas; 14.09.2012

arrow_upward
2
arrow_downward

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>

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

Удачи олег

person most_wanted    schedule 09.02.2015

arrow_upward
1
arrow_downward

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

(разрывы строк во внутренних элементах игнорируются)

<td>Foo
</td><td>
Bar</td>
person Ben    schedule 12.09.2012

arrow_upward
0
arrow_downward

Помогает ли "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, поэтому я не могу это проверить.

person Grimace of Despair    schedule 20.09.2012
comment
Э ... в любом случае, спасибо за награду. Означает ли это, что он что-то решил в Outlook 2003? Вы пробовали объединить это и решение coder1984 для 2007/2010? - person Grimace of Despair; 24.09.2012

arrow_upward
0
arrow_downward

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

person Horen    schedule 06.10.2012