保持相邻表格行之间的所有单元格对齐答案

【问题标题】：Maintain all cell alignments across adjacent table rows保持相邻表格行之间的所有单元格对齐
【发布时间】：2018-12-11 20:41:45
【问题描述】：

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

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

【问题讨论】：

<table> 元素在 20 年前不再被认为是“可接受的”布局。考虑到当今的网络编程环境，将它们用于此目的会告诉您的潜在客户：“这个人不了解网络技术的基础知识”，或者，它会告诉您的潜在老板：”解雇这个人。现在！”.
@AndreiGheorghiu 你说得有道理。我不是前端的人。非常感谢您的帮助。
@AndreiGheorghiu，顺便说一句，在电子邮件模板中使用表格是否仍然相关？
@Andrei Gheorghiu 错了。表格是与所有电子邮件客户端合作的唯一可靠方式。电子邮件开发不是网络开发。
为什么要使用三个嵌套表，而一个表就足够了？除了使用布局表的问题（尽管我很欣赏 html 电子邮件通常是 Web 开发的可怕不受欢迎的产物）。

标签： html css html-email

【解决方案1】：

将 valign="top" 添加到表格单元格本身。

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

【讨论】：

只有在行平均换行时才有效，跨设备绝不是这种情况。唯一可行的方法是有一个带有“空”列的表，即......“80 年代”几乎很酷。
你的意思是在所有表格单元格上？

【解决方案2】：

我不明白你为什么要给 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>

如果您正在尝试进行响应式电子邮件开发并希望查看表格单元格堆栈，我建议您查找响应式电子邮件模板并遵循该模板。此示例将使您的三列表始终如一地工作。

祝你好运。

【讨论】：

在第二个 sn-p 中，即使保持对齐，表格也不会调整到屏幕大小。
@Disasterkid 正如我之前所说，如果您正在尝试创建响应式电子邮件，请尝试下载满足您需求的模板并研究其工作原理。您发布的表格永远无法始终如一地工作。