我一直试图让这些列堆叠起来，似乎没有解决方案。有几层嵌套表（这里没有显示），以保持客户端的结构一致，但我不知道这是否与我的列不会堆叠的原因有关。我尝试将媒体查询应用于td，table和div元素，但我在几个网站上阅读的解决方案都没有。以下是我的代码的要点：
<head>
<style>
table[class="main-table"] {
width: 625px !important;
}
td[class="colsplit"] {
display: block !important;
width: 100% !important;
height: auto !important;
font-size: 12px !important;
}
table[class="colsplit"] {
display: block !important;
width: 100% !important;
height: auto !important;
font-size: 12px !important;
}
</style>
</head>
<body>
<table class="main-table" align=center width=625px style="color:#787878; border-spacing:0; border-collapse:collapse; text-decoration:none;" border=0>
<!-- Contact Us -->
<tr>
<!-- Advertise column -->
<td class="colsplit" align=left width=50% style="vertical-align:top; padding:0px; margin:0px; display:block;">
<table class="colsplit" width=100% style="border-color:orange; border-width:5px; border-style:solid;">
<tr>
<td class="colsplit" align=left style="color:#787878; font-size:16px; font-family:Arial, Helvetica, Sans Serif; font-weight:bold; margin:0px; padding:0px 0px 10px 10px;">Advertise
</td>
</tr>
<tr>
<td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 0px 10px 10px;">To advertise in our newsletter, please email:
<br>
<a href="mailto:email@domain.com" style="color:#333333; text-decoration:none;"><strong>email@domain.com</strong>
</a>
</td>
</tr>
</table>
</td>
<!-- Advertise column close -->
<!-- Services column -->
<td class="colsplit" align=left width=50% style="vertical-align:top; padding:0px; margin:0px; display:block;">
<table class="colsplit" align=left width=100% style="border-color:orange; border-width:5px; border-style:solid;">
<tr>
<td class="colsplit" style="color:#787878; font-size:16px; font-family:Arial, Helvetica, Sans Serif; font-weight:bold; margin:0px; padding:0px 20px 10px 0px;">Newsletter Services
</td>
</tr>
<tr>
<td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 20px 10px 0px;">Interested in reading more?
<br>Click the link below to
<br>
<a href="http://links.email.dmnews.com/ctt?kn=10&ms=MTI0NDc1MTgS1&r=MjE1MTE3OTc2ODc0S0&b=3&j=NjIxMzY0NDMzS0&mt=1&rt=0" name="DMNregister" style="color:#333333; text-decoration: none;"><strong>Sign Up for Our Newsletters</strong>
</a>
</td>
</tr>
<tr>
<td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 20px 10px 0px;">If you no longer wish to receive this newsletter, click here to
<br>
<a href="http://www.pages05.net/haymarketmediagrouplimited/DirectMarketingNews/dmnunsubscribe?spMailingID=12447518&spUserID=MjE1MTE3OTc2ODc0S0&spJobID=NjIxMzY0NDMzS0&spReportId=NjIxMzY0NDMzS0" name="Unsubscribe" style="color:#333333; text-decoration: none;" target="_blank" xt="LPWEBFORMOPTIN" xtwebform="1740515"><strong>unsubscribe</strong>
</a>
</td>
</tr>
<tr>
<td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 20px 10px 0px;">To manage your account and Newsletter settings, click here for
<br>
<a href="http://links.email.dmnews.com/ctt?kn=8&ms=MTI0NDc1MTgS1&r=MjE1MTE3OTc2ODc0S0&b=3&j=NjIxMzY0NDMzS0&mt=1&rt=0" name="ManageAccount" style="color:#333333; text-decoration:none;"><strong>My Account</strong>
</a>
</td>
</tr>
</table>
</td>
<!-- Services column close -->
</tr>
<!-- Contact Us close -->
</table>
</body>