我在一个容器表中有两行。行1和行2。
我有一个简单的两列布局，使用表，其中每行有两列。
顺便说一句，这些列是以不同的方式实现的，并且允许第1行中的列堆叠的媒体查询已经被删除。
因此，每行2列。
第1行是我的问题行。第二排是我的堆叠排。
仅第2行的列应堆叠在较小的屏幕上。
第2行中的表被声明为内联块，因此它们可以相邻放置。
在某些情况下，第2行的表格拒绝堆放在较窄的屏幕上。我将它缩小到问题行第1行内的两个表数据标记上的填充。
当问题行中的两个表数据标签的组合填充为27px或更低时，堆叠行(第2行(中的嵌套表将堆叠在小屏幕上(特别是604像素的宽度(。
但是，如果我将两个表数据标记上的填充更改为28px或更大的组合填充，则堆叠行中的表将不再在小屏幕上堆叠。
<body>
<center style="width: 100%;">
<div style="max-width: 650px;">
<table style="width: 100%;">
<!--Begin Problem Row-->
<tr>
<td>
<table style="width: 100%;">
<tr>
<!-- problem cell 1:
When problem cell 1 and problem cell 2 have a combined padding of greater than or equal to 28px, the tables in my "stacking row"
refuse to stack. Otherwise, they stack fine.
-->
<td style="padding: 13px; width: 50%">
<table>
<tr>
<td style="text-align: center;">
<p>Title</p>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
<p>Random Text</p>
</td>
</tr>
</table>
</td>
<!-- problem cell 2:
When problem cell 1 and problem cell 2 have a combined padding of greater than or equal to 28px, the tables in my "stacking row"
refuse to stack. Otherwise, they stack fine.
-->
<td style="padding: 15px; width: 50%">
<table>
<tr>
<td style="text-align: center;">
<p>Title</p>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
<p>Random Text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--Begin stacking row-->
<tr>
<td>
<table width="100%;">
<tr>
<td style="text-align: center;">
<!--These tables should stack -->
<table style="display: inline-block; width: 100%; vertical-align: top; max-width: 300px;">
<tr>
<td>
<table >
<tr>
<td>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
</td>
</tr>
<tr>
<td>
<p>Title</p>
</td>
</tr>
<tr>
<td>
<p>This is a description of a product that you can use to describe the products that you need to describe</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--These tables should stack -->
<table style="display: inline-block; width: 100%; vertical-align: top; max-width: 300px;">
<tr>
<td>
<table >
<tr>
<td>
<img src="https://via.placeholder.com/275x200" alt="" width="275">
</td>
</tr>
<tr>
<td>
<p>Title</p>
</td>
</tr>
<tr>
<td>
<p>This is a description of a product that you can use to describe the products that you need to describe</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
在我的内部样式表中，所有td的填充设置为0，所有表的边框间距设置为0。
我已经包含了我的整个样式表，因为它相当小。
/* General Resets
The following resets will eliminate all default margin, padding and border for all
clients. The capital M in Margin on the body reset is recommended for Outlook. Also, we will give
the area outside our email frame a neutral background color.
*/
body, .body {
Margin: 0;
padding: 0;
background-color: #f6f9fc;
}
.backHover:hover{
background-color: #ffffff !important;
}
table {
border-spacing: 0;
background-color: black;
}
.centering {
width: 100%;
table-layout: fixed;
background-color: #f6f9fc;
padding-bottom: 40px;
}
td {
padding: 0;
background-color: aqua;
}
img {
border: 0;
}
p {
margin: 0;
}
a {
text-decoration: none;
}
table, td, div, h1, p {font-family: Arial, sans-serif;}
</style>
我不知道为什么会发生这种行为。
问题源于第二行的max-width: 300px。你的第一行的宽度加起来是606px((275*2(+(13*2(-(15*2((，而第二行的最大宽度是600px(300+300(，所以它永远不会堆叠。
我不确定你想要完成的电子邮件应该是什么样子，但两列中的图像之间存在一些对齐问题。我会开始使用一个框架(比如DML或Eamils基金会(或预构建的模板，并对其进行修改。这样，您就不会在手动对齐表的基础上调试电子邮件客户端问题。