【发布时间】：2022-01-19 19:52:31
【问题描述】：
我在容器表中有两行。第 1 行和第 2 行。
我有一个简单的两列布局，使用表格，每行有两列。
顺便说一句，列的实现方式不同，并且允许第 1 行中的列堆叠的媒体查询已被删除。
所以，2 行，每行有两列。
第 1 行是我的问题行。第 2 行是我的堆叠行。
仅第 2 行的列应堆叠在较小的屏幕上。
第 2 行中的表格被声明为 inline-block，因此它们可以并排放置。
在某些情况下，第 2 行中的表格拒绝堆叠在较窄的屏幕上。我将其缩小到第 1 行（我的问题行）内的两个表格数据标签上的填充。
当问题行中的两个表格数据标签的组合内边距为 27 像素或以下时，堆叠行（第 2 行）中的嵌套表格将堆叠在小屏幕上（特别是宽度为 604 像素）。
但是，如果我将两个表格数据标签上的内边距更改为 28 像素或更大的组合内边距，则堆叠行中的表格将不再堆叠在小屏幕上。
<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>
我不知道为什么会发生这种行为。
【问题讨论】：
-
只是一个观察：中心现在是一个弃用的标签。也许看看其他方法，例如容器上的 flex。
-
@AHaworth 我使用的是较旧的文档类型（xhtml 1.0 过渡）。电子邮件有很多奇怪的怪癖，需要 90 年代和 2000 年代初的实践。
-
啊，是的，我错过了电子邮件标签 - 因此是表格等
标签： html css html-email