声明为内联块的表拒绝在小屏幕上堆叠
Tables declared as inline-block refuse to stack on small screens
我在容器中有两行 table。第 1 行和第 2 行。
我有一个简单的两列布局，使用 tables，其中每行有两列。
顺便说一句，列的实现方式不同，允许第 1 行中的列堆叠的媒体查询已被删除。
所以，2 行，每行两列。
第 1 行是我的问题行。第 2 行是我的堆叠行。
仅第 2 行的列应在较小的屏幕上堆叠。
第 2 行中的 table 被声明为行内块，因此它们可以并排放置。
在某些情况下，第 2 行中的 table 会拒绝在较窄的屏幕上堆叠。我将范围缩小到第 1 行（我的问题行）内的两个 table 数据标签上的填充。
当问题行中的两个 table 数据标签的组合 padding 为 27px 或以下时，堆叠行（第 2 行）中的嵌套 table 将在小屏幕上堆叠（特别是宽度为 604 像素）。
但是，如果我将两个 table 数据标签的内边距更改为 28px 或更大的组合内边距，堆叠行中的 table 将不再在小屏幕上堆叠。
<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，所有 tables 的边框间距设置为 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 or Foundation for Eamils）或预建模板并对其进行修改。这样您就不会在手动对齐表格的基础上调试电子邮件客户端问题。
我在容器中有两行 table。第 1 行和第 2 行。
我有一个简单的两列布局，使用 tables，其中每行有两列。
顺便说一句，列的实现方式不同，允许第 1 行中的列堆叠的媒体查询已被删除。
所以，2 行，每行两列。
第 1 行是我的问题行。第 2 行是我的堆叠行。
仅第 2 行的列应在较小的屏幕上堆叠。
第 2 行中的 table 被声明为行内块，因此它们可以并排放置。
在某些情况下，第 2 行中的 table 会拒绝在较窄的屏幕上堆叠。我将范围缩小到第 1 行（我的问题行）内的两个 table 数据标签上的填充。
当问题行中的两个 table 数据标签的组合 padding 为 27px 或以下时，堆叠行（第 2 行）中的嵌套 table 将在小屏幕上堆叠（特别是宽度为 604 像素）。
但是，如果我将两个 table 数据标签的内边距更改为 28px 或更大的组合内边距，堆叠行中的 table 将不再在小屏幕上堆叠。
<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，所有 tables 的边框间距设置为 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 or Foundation for Eamils）或预建模板并对其进行修改。这样您就不会在手动对齐表格的基础上调试电子邮件客户端问题。