Как задать ширину контента для Outlook 2013 в адаптивном письме для рассылки через условный комментарий?

Не удается задать ширину таблицы, чтобы она корректно отображалась в Outlook 2013. Письмо отображается везде хорошо, кроме Outlook.
Если жестко прописывать table width="600", тогда появляется горизонтальный скролл в мобильных устройствах.
Как задать ширину контента только для Outlook 2013 в адаптивном письме для рассылки через условный комментарий?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>temp</title>
</head>
<body>
	<table align="center" style="border-collapse: collapse; margin-left: auto; margin-right: auto;">
		<tbody> 
			<tr>
				<td colspan="2" align="center">
					<img style="max-width: 600px; width: 100%; height: auto;" src="https://cdn.pixabay.com/photo/2021/02/13/21/43/field-6012856_960_720.jpg" alt="img">
				</td>
			</tr>
		</tbody>
	</table>

	<br>
	<table align="center" style="max-width: 600px; width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto; background-color: #ffffff;">
		<tbody>
			<tr style="table-layout: fixed;">
				<td colspan="2" style="padding-top: 30px; text-align: center; font-weight: 700;">
					<font style="font-size: 16px; font-family: arial, sans-serif; padding-bottom: 15px;"><span>Здравствуйте, Дмитрий Вячеславович!</span></font>
				</td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2" style="padding-bottom: 30px; text-align: center;">
					<font style="font-size: 16px; font-family: arial, sans-serif;">
						<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum officia, nam quia?<br> Подробности в каждой новости по клику
					</span></font>
				</td>
				<td></td>
			</tr>
		</tbody>
	</table>
	 
	<br> 
	<table align="center" style="max-width: 600px; width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto; background-color: #ffffff;">
		<!--[if gte mso 9]>
		<table border="0" cellpadding="0" cellspacing="0" width="400" style="margin:0; padding:0"><tr><td>
		<![endif]-->
		<tbody>
			<tr style="">
				<td style="padding-left: 15px;"><font style="font-size: 16px; font-family: arial, sans-serif; font-weight: bold;"><span>СОБЫТИЯ</span></font></td>
				<td style="padding-right: 15px;"><hr></td>
			</tr>
			<tr>
				<td style="padding-left: 15px; padding-right: 10px;; padding-top: 15px;">
					<img style="width: 100%; max-width: 120px; min-width: 120px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQX2ePta_NsYHklyiMsPNDexFvaXqMpuUtE_w&usqp=CAU" alt="">
				</td>
				<td style="vertical-align: text-top; padding-top: 15px;">
					<font style="font-size: 16px; font-family: arial, sans-serif;">
						<span display:inline-block;>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Officia, omnis?</span>
					</font>
				</td>
			</tr>
			<tr>
				<td style="padding-left: 15px; padding-right: 10px; padding-top: 15px;">
					<img style="width: 100%; max-width: 120px; min-width: 120px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQX2ePta_NsYHklyiMsPNDexFvaXqMpuUtE_w&usqp=CAU" alt="">
				</td>
				<td style="vertical-align: text-top; padding-top: 15px;">
					<font style="font-size: 16px; font-family: arial, sans-serif;">
						<span style="display:inline-block;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quas quis eligendi.</span>
					</font>
				</td>
			</tr>
		</tbody>
		<!--[if gte mso 9]>
		</td></tr></table>
		<![endif]-->
	</table>
</body>
</html>


Контент разъезжается в Outlook 2013. Прилагаю скрин.

60366bd46708c550001090.png
  • Вопрос задан
  • 27 просмотров
Решения вопроса 1
@Burnedheart
Попробуй вот это:
https://gist.github.com/elidickinson/5525752
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы