【发布时间】：2025-12-06 20:00:02
【问题描述】：
我正在尝试为电子邮件创建一个包含三个表格的嵌入式表格。我使用表格的原因是，当电子邮件在较小的屏幕上呈现时，我希望表格堆叠在一起。并非所有电子邮件客户端都能很好地阅读 CSS，因此我正在寻找内联 HTML 编码，而不是 CSS 解决方案。
内容表的总宽度为 600 像素。其中，表 1 为 299px 宽，表 2 为 2px 宽，表 3 为 299 px 宽。
我遇到的第一个挑战是表 2 上的行高在表 1 和表 3 中不是 100%。我通过将内容表和表 2 中的行高更改为 100% 来解决这个问题。这似乎解决了表 2 的行高，但随后表 3 被向下推。
这里是 jsfiddle：https://jsfiddle.net/robertschlotzhauer/snk6pjb9/
<table border="0" cellpadding="0" cellspacing="0" width="600" height="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="299">
<tbody>
<tr>
<td style="padding:10px 15px 10px 15px;line-height:18px">
<div align="center">
<font style="font-family:Arial;font-size:16px;">
<b>
Text
</b>
</font>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#8C231C" border="0" cellpadding="0" cellspacing="0" height="100%">
<tbody>
<tr>
<td style="line-height:2px" bgcolor="#8C231C" width="2px">
<font style="font-size:2px">
</font>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="299" valign="top" align="right">
<tbody>
<tr>
<td style="padding:10px 20px 0px 20px;line-height:18px">
<div align="center">
<font style="font-size:16px;" face="arial">
<b>
Text text text
</b>
</font>
<br>
<br>
<font style="font-size:12px;" face="arial">
Text text text
</font>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
任何有关清理此问题的建议都会有所帮助。
【问题讨论】：
-
你为什么使用表格而不是
<div>'s？这个编码标准在 90 年代后期就已经过时了。 -
使用表格，以便在电子邮件客户端的较小屏幕上查看表格时，它们彼此对齐。在桌面上，它们应该成一条直线对齐，但在客户端上，表 1 应该在顶部，表 3 应该在底部。
-
请编辑您的问题以明确这一点，因为它没有说明这一点。此外，您的 jsfiddle 包含与您在问题中发布的内容完全不同的 html。
-
已对问题进行了编辑，以使情况更加清晰。
-
您到底想要实现什么/您遇到的问题是什么？你是否试图让它响应堆叠在彼此之上？你想用那个 2px 的表做点什么吗？只是想在我考虑清理之前澄清一下
标签： html html-table html-email inline