Напишите html, не растягивая таблицу на всю ширину мобильного телефона - PullRequest
Новая
       16

Напишите html, не растягивая таблицу на всю ширину мобильного телефона

0 голосов
/ 05 марта 2019

Я действительно ненавижу электронную почту html.Поэтому я создал новое электронное письмо с подтверждением для нашего бизнеса, и мне нужно, чтобы белые блоки на рисунке ниже были такой же ширины.На рабочем столе они выглядят совершенно нормально и соответствуют.

Не вставляя полный шаблон, вот как код структурируется с помощью используемого мной CSS: 

<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td>
                        <table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>First heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>Second heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

И картина проблемына мобильном телефоне:

enter image description here

Я почти уверен, что 600px недоступны на устройстве такого размера, которое видно с контентом, ноЯ не могу использовать media queries, поэтому не совсем уверен, куда обратиться.

1 Ответ

1 голос
/ 05 марта 2019

макет, отображаемый согласно ширине вашего контента в TD.приведенный выше HTML-код дает «первый заголовок» и «второй заголовок» в качестве содержимого, поэтому символы второго заголовка больше, чем первый заголовок, поэтому ширина не будет совпадать.

решение: 

<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td>
                        <table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>First heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>Second heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
...