I have two rows inside of a container table. Row 1, and Row 2.
I have a simple two column layout, using tables, where each row has two columns.
As an aside, the columns are implemented differently, and the media queries that would allow the columns in row 1 to stack have been removed.
So, 2 rows each with two columns.
Row 1 is my problem row. Row 2 is my stacking row.
The columns on row 2 only, should stack on smaller screens.
The tables in row 2 are declared as inline-block so they can sit next to each other.
Under certain conditions, the tables in row 2 refuse to stack on narrower screens. I narrowed it down to the padding on two table data tags inside of Row 1, my problem row.
When the two table data tags in the problem row have a combined padding of 27px or below, the nested tables in the stacking row (row 2) will stack on small screens (and specifically at a width of 604 pixels).
However if I change the padding on the two table data tags to a combined padding of 28px or more, the tables in the stacking row will no longer stack on small screens.
<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>
In my internal stylesheet, the padding on all td's is set to 0 and the border spacing on all tables is set to 0.
I've included my entire stylesheet since it's fairly small.
/* 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>
I don't know why this behavior is happening.
The problem stems from the max-width: 300px on your second row. Your initial row is adding up to 606px in width ((275 * 2) + (13 * 2) + (15 * 2)) while the max width of the second row is 600px (300 + 300) so it won't ever stack.
I'm not sure what your intended finished email is supposed to look like, but there's some alignment issues between the images in the two columns. I would start using a framework (like DML or Foundation for Eamils) or a pre-built template and modify that. That way you're not debugging email client issues on top of manually aligning tables.