Поддерживать все выравнивания ячеек в соседних строках таблицы

Question

В блоке из трех столбцов, приведенном ниже, когда я уменьшаю размер экрана, чтобы приспособить его к экранам мобильных устройств, выравнивание между заголовком, изображением и текстом больше не сохраняется, даже если я установил фиксированные размеры для строк таблицы.Как изменить код так, чтобы все три заголовка, изображения и тексты были правильно выровнены?Это потому, что я использую отдельные таблицы?

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;background-color: #f99f11;">
<tr>
<td>
        <!-- Title: BEGIN-->
        <tr>
            <td>
                <h2>Ditt medlemskap</h2>
            </td>
        </tr>
        <!-- Title: END-->

        <tr>
            <td>
                <table cellpadding="10">
                    <tr>
                        <td style="background-color: #ffffff;" width="32%">
                            <table>

                                <tr height="10px" style="white-space: nowrap;overflow: hidden;">
                                    <td>
                                        <h3>Rätta dina uppgifter</h3>
                                    </td>
                                </tr>
                                <tr height="40px">
                                    <td>
                                        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"></a></td>
                                </tr>
                                <tr height="60px">               
                                    <td>
                                        Det är viktigt att vi har rätt uppgifter om dig. Logga in och ändra här.
                                    </td>

                                </tr>

                            </table>
                        </td>
                        <td width="2%">
                        </td>
                        <td style="background-color: #ffffff;" width="32%">
                              <table>

                                <tr height="10px" style="white-space: nowrap;overflow: hidden;">
                                    <td>
                                        <h3>Tipsa oss om</br> ny medlem</h3>
                                    </td>

                                </tr>
                                <tr height="40px">
                                    <td>
                                        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"></a></td>
                                </tr>
                                <tr height="60px"> 

                                    <td>
                                        Vet du någon som ännu inte är medlem? Tipsa oss! </td>

                                </tr>


                            </table>
                        </td>
                        <td width="2%">
                        </td>
                        <td style="background-color: #ffffff;" width="32%">
                            <table>

                                <tr height="10px" style="white-space: nowrap;overflow: hidden;">
                                    <td>
                                        <h3>Utvecklas </br>som chef</h3>
                                    </td>

                                </tr>
                                <tr height="40px">
                                    <td>
                                        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"></a></td>
                                </tr>
                                <tr height="60px"> 

                                    <td >
                                         Ta del av ett stort utbud av kostnadsfria kurser och seminarier! </td>

                                </tr>


                            </table>
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
</td>
</tr>
<tr>
<td height="30px"></td>
</tr>


    </table>

Answer 1

Я не понимаю, почему вы добавляете высоту к tr.

Начните с базовой структуры таблицы и добавьте необходимые компоненты.Вам было бы лучше создать таблицу для вашего заголовка и таблицу для ваших изображений.Вы найдете более последовательные результаты с такой структурой:

<table>
  <tr>
    <td>*title table*</td>
  </tr>
  <tr>
    <td>*three table*</td>
  </tr>
</table>

Родительская таблица будет управлять выравниванием по ширине всех других таблиц в одном столбце.

Если вы хотите изображениячтобы иметь одинаковую ширину, добавьте max-width:value; к каждому изображению.Попробуйте формат таблицы следующим образом:

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="600">
<tr>
    <td width="33%" valign="top" align="center">
        <h3>title</h3>
        <a href="#">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; max-width: 100px; display: block;">
        </a>
        <p>Some text</p>
    </td>
    <td width="33%" valign="top" align="center">
        <h3>title</h3>
        <a href="#">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; max-width: 100px; display: block;">
        </a>
        <p>Some text</p>
    </td>
    <td width="33%" valign="top" align="center">
        <h3>title</h3>
        <a href="#">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; max-width: 100px; display: block;">
        </a>
        <p>Some text</p>
    </td>
</tr>

Если вы пытаетесь заняться адаптивной разработкой электронной почты и хотите увидеть стек ячеек таблицы, я предлагаю поискать шаблон адаптивной электронной почты иследуя этому вместо этого.В этом примере ваша таблица из трех столбцов будет работать последовательно.

Удачи.

Answer 2

Добавьте valign = "top" к самим ячейкам таблицы.

<td valign="top">
   <h3>Rätta dina uppgifter</h3>
</td>