Как сделать рассылку с 3мя одинаковыми колонками, которые будут отображаться одинаково везде (gmail, outlook)?

@NataliaKaa · Регистрация: 13.06.2021

Студворк — интернет-сервис помощи студентам

Добрый день,
у меня возникла проблема при верстке 3 колонок в рассылке, которые должны отображаться одинаково везде ( в одной строке на десктоп, в ряду на mobile) код выглядит так https://codepen.io/nataliaKaa/pen/GRWwEjM Сейчас на outlook размер колонок не одинаковый и никак не могу этого решить. Можете подсказать кек решить данную проблему?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="w600" width="600">
 
  <tr>
   <td align="center" style="padding:10px 0;">
    <table border="0" cellpadding="0" cellspacing="0" class="w600" style="border-spacing: 0;table-layout: fixed;margin: 0 auto;" width="100%">
     
      <tr>
       <td height="30" style="border-collapse: collapse;">
       </td></tr><tr>
       <td align="center" class="w600 t-left" style="font-family: Verdana,sans-serif;font-size:24px;color:#494950; font-weight:bold;line-height:28px;mso-line-height-rule:exactly;text-align:center;vertical-align:top; word-break:break-word; padding-bottom:25px" valign="top" width="100%">
        Sick of Glitches</td></tr><tr>
       <td align="center" class="w600 t-left" style="font-family: Verdana,sans-serif;font-size:14px;color:#494950; font-weight:normal;line-height:28px;mso-line-height-rule:exactly;text-align:center;vertical-align:top; word-break:break-word; padding-bottom:15px;" valign="top" width="100%">
        Lorem Ipsum dolor set next level broadband.</td></tr><tr>
       <td height="30" style="border-collapse: collapse;">
       </td></tr><!-- odstep --></table><table align="left" border="0" cellpadding="0" cellspacing="0" height="25" style="border-spacing: 0;table-layout: auto;margin: 0 auto;" width="1">
     
      <tr>
       <td height="15" style="font-size: 0;line-height: 0;border-collapse: collapse;">
        <p class="spacing" style="padding-left: 10px;">
        </p></td></tr></table><!-- koniec odstep --><!-- lewa kol. --><table align="left" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="table-full" height="190" style=" width:183px; height: 190px; border:1px solid #EEEEEE; border-spacing: 0;box-shadow: 0px 1px 1px RGB(18, 97, 160,0.06), 0px 4px 4px  RGBa(18, 97, 160,0.3), 1px 4px 6px rgba(18, 97, 160,0.06); table-layout: auto;margin: 0 auto; table-layout:fixed;" width="183">
     <!-- obrazek -->
      <tr>
       <td align="center" style="line-height: 0px;border-collapse: collapse;">
        <img alt="obrazek" class="image" height="49" src="https://image.s1.sfmc-content.com/lib/fe5f15707c6200797611/m/1/3d86d5ac-1f09-4861-adf7-b4563cc0f0b1.png" style="display: block;font-size: 0px;line-height: 0px;border: 0px;overflow: hidden !important;" width="100"></td></tr><!-- koniec obrazek --><tr>
       <td height="20" style="border-collapse: collapse;">
       </td></tr><!-- tytul --><tr>
       <td align="center" style="font-family: Verdana,sans-serif;font-size:14px; color: #FF3D00; font-weight:normal;line-height: 25px;border-collapse: collapse;">
        Speed guaranteed</td></tr><!-- koniec tytul --><!-- zawartosc --><tr>
       <td align="left" class="content" style="font-family: Verdana,sans-serif;font-size:14px;color:#494950; font-weight: normal;line-height: 20px; border-collapse: collapse;padding:0px 10px; ">
        The speed we promise is the speed you will get. <span class="invisible-1"> Competitive </span></td></tr><!-- content blok --><tr>
       <!-- koniec zawartosc --></tr><tr>
       <td height="10" style="border-collapse: collapse;">
       </td></tr></table><!-- koniec lewa kol. --><!-- odstep poziom --><table align="left" border="0" cellpadding="0" cellspacing="0" height="25" style="border-spacing: 0;table-layout: auto;margin: 0 auto;" width="1">
     
      <tr>
       <td height="15" style="font-size: 0;line-height: 0;border-collapse: collapse;">
        <p class="spacing" style="padding-left: 15px;">
        </p></td></tr></table><!-- koniec odstep poziom --><!-- srodkowa kol. --><table align="left" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="table-full" height="190" style="height:190px; width:183px; border:1px solid #EEEEEE; border-spacing: 0;box-shadow: 0px 1px 1px RGB(18, 97, 160,0.06), 0px 4px 4px  RGBa(18, 97, 160,0.3), 1px 4px 6px rgba(18, 97, 160,0.06); margin: 0 auto; table-layout:fixed;" width="183">
     <!-- obrazek -->
      <tr>
       <td align="center" style="line-height: 0px;border-collapse: collapse;">
        <img alt="obrazek" class="image" height="49" src="https://image.s1.sfmc-content.com/lib/fe5f15707c6200797611/m/1/3d86d5ac-1f09-4861-adf7-b4563cc0f0b1.png" style="display: block;font-size: 0px;line-height: 0px;border: 0px;overflow: hidden !important;" width="100"></td></tr><!-- koniec obrazek --><tr>
       <td height="20" style="border-collapse: collapse;">
       </td></tr><!-- tytul --><tr>
       <td align="center" style="font-family: Verdana,sans-serif;font-size:14px; color: #FF3D00; font-weight:normal;line-height: 25px;border-collapse: collapse; text-align:center;">
        Value for money</td></tr><!-- koniec tytul --><!-- zawartosc --><tr>
       <td align="left" style="font-family: Verdana,sans-serif;font-size:14px;color:#494950;font-size: 14px;font-weight: 400;line-height: 20px; border-collapse: collapse;padding:0px 10px;">
        Our price will always be transparent &amp; competitive</td></tr><!-- koniec zawartosc --><tr>
       <td height="10" style="border-collapse: collapse;">
       </td></tr></table><!-- koniec srodkowa kol. --><!-- odstep poziom --><table align="left" border="0" cellpadding="0" cellspacing="0" height="25" style="border-spacing: 0;table-layout: auto;margin: 0 auto;" width="1">
     
      <tr>
       <td height="15" style="font-size: 0;line-height: 0;border-collapse: collapse;">
        <p style="padding-left: 15px;">
        </p></td></tr></table><!-- koniec odstep poziom --><!-- prawa kol. --><table align="left" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="table-full" height="190" style="height:190px; width:183px; border:1px solid #EEEEEE; border-spacing: 0;box-shadow: 0px 1px 1px RGB(18, 97, 160,0.06), 0px 4px 4px  RGBa(18, 97, 160,0.3), 1px 4px 6px rgba(18, 97, 160,0.06); margin: 0 auto;table-layout:fixed; " width="183">
     <!-- obrazek -->
      <tr>
       <td align="center" style="line-height: 0px;border-collapse: collapse;">
        <img alt="obrazek" class="image" height="49" src="https://image.s1.sfmc-content.com/lib/fe5f15707c6200797611/m/1/3d86d5ac-1f09-4861-adf7-b4563cc0f0b1.png" style="display: block;font-size: 0px;line-height: 0px;border: 0px;overflow: hidden !important;" width="100"></td></tr><!-- koniec obrazek --><tr>
       <td height="20" style="border-collapse: collapse;">
       </td></tr><!-- tytul --><tr>
       <td align="center" class="w600" style="font-family: Verdana,sans-serif;font-size:14px; color: #FF3D00; font-weight:normal;line-height: 25px;border-collapse: collapse;">
        Effortless switching</td></tr><!-- koniec tytul --><!-- zawartosc --><tr>
       <td align="left" style="font-family: Verdana,sans-serif;font-size:14px;color:#494950;font-size: 14px;font-weight: normal;line-height: 20px; border-collapse: collapse;padding:0px 10px;">
        We'll make the whole process of joining us as seamless.</td></tr><!-- koniec zawartosc --><tr>
       <td height="10" style="border-collapse: collapse;">
       </td></tr></table><!-- koniec prawa kol. --></td></tr><tr>
   <td height="50" style="border-collapse: collapse;">
   </td></tr></table><!-- end 3 columns -->

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .