Nivaech
@Nivaech
фотограф, видеограф, графический дизайнер

Как изменить таблицу HTML для мобильной версии?

Пишу html-страницу для email-рассылки. Нужно ее оптимизировать под outlook, из-за чего media queries и все смежное отпадает, нужно искать альтрнативные методы.

Блок выглядит вот так:
5f4f641722d85419255154.png
В мобильном виде два столбца должны становиться двумя рядами:
5f4f6437671ea445275793.png

Вот так вот выглядит этот блок - одна клетка с картинкой карты, и вторая - с информацией.
<tr>
                                    <td style="padding-bottom: 48px">
                                        <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                                            <tr>
                                                <td class="map-container">
                                                    <img style="border-radius: 8px" src="map-image.png">
                                                </td>
                                                <td class="address-container">
                                                    <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="event-summary-label">Apr, 16</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="event-summary-label">7:30 PM - 9:30
                                                                    PM</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="padding-bottom: 20px">
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="event-summary-label">St. Denis
                                                                    Theatre</span>
                                                                <br>
                                                                <a class="link-small" target="_blank"
                                                                    target="_blank"
                                                                    href="">1594
                                                                    Rue Saint-Denis, Montreal</a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="caption">
                                                                    Back door entrance
                                                                </span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="caption">
                                                                    Wheelchair Accessible
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>


Как сделать этот блок адаптивным, чтобы в мобильной версии он складывался в два ряда, не используя при этом media queries?
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
DanArst
@DanArst
Э, Ойboy!
Вот хороший метод
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
Попробуйте фреймворк
https://mjml.io/documentation/
Разобраться - пара часов + там есть примеры кода.
Зато он за вас думает о максимальной поддержке почтовых клиентов
Ответ написан
Ваш ответ на вопрос

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

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