我在容器表中有兩行。第 1 行和第 2 行。
我有一個簡單的兩列布局，使用表格，每行有兩列。
順便說一句，這些列的實作方式不同，并且允許第 1 行中的列堆疊的媒體查詢已被洗掉。
因此，2 行，每行有兩列。
第 1 行是我的問題行。第 2 行是我的堆疊行。
僅第 2 行的列應堆疊在較小的螢屏上。
第 2 行中的表被宣告為 inline-block，因此它們可以并排放置。
在某些情況下，第 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>
我不知道為什么會發生這種行為。
uj5u.com熱心網友回復：
問題源于max-width: 300px您的第二行。您的第一行加起來寬度為 606px ((275 * 2) (13 * 2) (15 * 2))，而第二行的最大寬度為 600px (300 300)，所以它永遠不會堆。
我不確定您想要完成的電子郵件應該是什么樣子，但是兩列中的影像之間存在一些對齊問題。我會開始使用框架（如DML或Foundation for Eamils）或預構建模板并對其進行修改。這樣，您就不會在手動對齊表格的基礎上除錯電子郵件客戶端問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/416463.html
標籤：
上一篇：如何撰寫嵌套元素的XPath