保持所有相邻表格行的单元格对齐 [英] Maintain all cell alignments across adjacent table rows

问题描述

在下面的三列块中，当我缩小屏幕尺寸以适应移动屏幕时，即使我为表行指定了固定大小，也不再保留标题，图像和文本之间的对齐方式.如何修改代码，以使所有三个标题，图像和文本正确对齐?是因为我使用单独的表吗?

In the three-column block below as I shrink the size of screen to adjust to mobile screens, the alignment between the header, the image and the text is no longer kept even though I have dictated fixed sizes for the table rows. How do I modify the code so that all three headlines, images and texts are correctly aligned? Is it because I am using separate tables?

<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>

推荐答案

我不明白您为什么要向tr添加高度.

I don't understand why you're adding a height to tr.

从基本的表结构开始，然后添加所需的组件.为标题创建表并为表图像创建表几乎会更好.使用以下结构，您将找到更一致的结果:

Start with a basic table structure and add in the components you need. You would almost be better off creating a table for your title and a table for your table images. You'll find more consistent results with a structure like this:

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

父表将控制所有其他表在一列中的宽度对齐.

The parent table will control the width align all of the other tables in one column.

如果您希望图像具有相同的宽度，请在每个图像上添加max-width:value;.尝试这样的表格格式:

If you want the images to be the same width, add max-width:value; to each image. Try a table format like this:

<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>

如果您尝试进行响应式电子邮件开发并希望看到表格单元格堆叠，建议您查找一个响应式电子邮件模板，然后按照该模板进行操作.此示例将使您的三列表保持一致.

If you're trying to do responsive email development and wish to see the table cells stack, I suggest looking up a responsive email template and following that instead. This sample will get your three column table working consistently.

祝你好运.

这篇关于保持所有相邻表格行的单元格对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！