#javascript #html #css
#javascript #HTML #css
Вопрос:
В outlook2016 в таблице будут пробелы с использованием rowspan.
Эта проблема не возникает с другими клиентами почтовых ящиков.
Я хочу настроить html как электронное письмо, а тег table несовместим. Я попробовал кое-какой CSS, например dispaly:block
мировоззрение http://sowcar.com/t6/695/1554344627×2362277805.png
<table style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;" rowspan="3">xxxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;" rowspan="3">xxxxx</td>
</tr>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;" rowspan="2">xxxxx</td>
</tr>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxxxx</td>
</tr>
</tbody>
</table>
Таблица динамична, она может быть примерно такой:
https://codepen.io/scheinin/pen/LaQpRV
Это результат, которого я ожидал
аватар http://sowcar.com/t6/695/1554344880×2890208949.png
Комментарии:
1. В Outlook с 2007 по Outlook 2019 (и более поздних версиях) для рендеринга электронных писем в формате HTML используется движок рендеринга MS Word, который поддерживает только HTML4 и подмножество CSS2 (т. Е. он такой же, как 1998). Я рекомендую кодировать в соответствии с последней спецификацией HTML5 и CSS3 в интересах большинства пользователей электронной почты и предоставлять ссылку на веб-версию для просмотра пользователям Outlook для настольных компьютеров. Microsoft действительно нужно действовать сообща, это ужасно. В Outlook для настольных компьютеров теперь также есть кнопка «просмотреть это сообщение в вашем веб-браузере».
2. @Dai Я чувствую то же самое.
Ответ №1:
Вы можете попробовать сохранить все столбцы (td) в одной строке (tr), если хотите ограничить использование столбцов (colspan), а если хотите ограничить использование строк, то используйте (rowspan).
Вы можете сделать это, объединив все столбцы в одну строку.
<table style="width: 100%; border-collapse: collapse;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxxx</th>
<th style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center; background-color: pink;">xxxxx</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxx</td>
<td style="padding: 5px 0; border: 1px solid #bdbdbd; text-align: center;">xxxxxxx</td>
</tr>
</tbody>
</table>