我正在使用DISPLAY：BLOCK在适当的td单元格中使用列类别，但是当调整为移动尺寸时，徽标和CALL US td单元格不会垂直堆叠。
它为他们添加了100％的宽度，但是在移动尺寸时，它实际上并没有占据屏幕的100％。
JSFIDDLE：http://jsfiddle.net/7bm95wrm/
HTML
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td bgcolor="#FFFFFF" align="center">
<table width="650px" cellspacing="0" cellpadding="3" class="container">
<tr>
<td class="alignright greytext" style="font-size: 12px;">Having problems reading this email. Don't panic! <a href="#" class="bold">Click here</a> an you can read it in a browser.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="navbar navbar-inverse" align="center">
<!-- This setup makes the nav background stretch the whole width of the screen. -->
<table width="650px" cellspacing="0" cellpadding="3" class="container">
<tr class="navbarbg navbar-inverse">
<td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td>
<td colspan="2">
<table class="whitetext" width="400">
<tr>
<td class="smalltext alignright" valign="bottom">
Call: 0161 482 7650<br />
<h2 class="lucidafont">More from Leasing</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center">
<table width="650px" cellspacing="0" cellpadding="3" class="container toppadding">
<tr>
<td>
<h1 class="bluetext">Thank you for downloading<br /> the Leasing Landscape</h1>
</td>
</tr>
<tr>
<td class="greytext bodytext">
<h2 class="bluetext">Dear [name],</h2>
<p>Thank you for downloading the Leasing Landscape - we're sure you'll find it useful.</p>
<p>To view your copy of the guide, please click here: <a href="#" alt="" title="">[link]</a></p>
<p>Regards,</p>
<h2 class="bluetext">The team at CH&L</h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center">
<table width="650px" cellspacing="0" cellpadding="3" class="container">
<tr>
<td colspan="5">
<hr>
</td>
</tr>
<tr>
<td colspan="5" style="text-align:center;">
<a href="#" alt="" title=""><img src="images/twitter.jpg" alt="" title="" /></a>
<a href="#" alt="" title=""><img src="images/facebook.jpg" alt="" title="" /></a>
<a href="#" alt="" title=""><img src="images/googleplus.jpg" alt="" title="" /></a>
<a href="#" alt="" title=""><img src="images/linkedin.jpg" alt="" title="" /></a>
</td>
</tr>
<tr style="text-align:center;">
<td colspan="6" style="font-size: 12px;" class="greytext">
<p>Copyright © 2000-2015 Really Good Domains Ltd. All rights reserved.</p>
</td>
</tr>
<tr style="text-align:center; font-size: 12px;" class="copyright">
<td class="bold column"><a href="#" alt="" title="">Terms & Conditions</a></td>
<td class="bold"><a href="#" alt="" title="">Privacy</a></td>
<td class="bold"><a href="#" alt="" title="">Cookies</a></td>
<td class="bold"><a href="#" alt="" title="">Accessibility</a></td>
<td class="bold"><a href="#" alt="" title="">Sitemap</a></td>
</tr>
</table>
</td>
</tr>
</table>
CSS
body { font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; }
td { }
.alignright { text-align: right; }
.navbarbg { background-color: #283791; color: #ffffff; height: 75px; }
hr { }
h1,h2,h3,h4,h5,h6 { font-family: Arial Bold,Gadget,sans-serif; margin: 0; }
a { color: #283790; }
.whitetext { color: #ffffff; }
.bluetext { color: #283790; }
.greytext { color: #9f9f9f; }
.smalltext { font-size: 14px; }
.bodytext { font-size: 13px; padding-top: 20px; }
.lucidafont { font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif; }
.toppadding { padding-top: 20px; padding-bottom: 10px; }
.bold { font-weight: bold; }
/* .copyright td { border-right: 1px solid #000; height: 5px; }
.copyright td:last-child { border-right: none; } */
@media screen and (max-width:480px) {
table {
width: 100%!important;
}
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 440px!important;
}
table td[class="column"] {
width:100%!important;
display: block!important;
}
}
答案 0 :(得分：0)
您仅使用display: block一个td，我认为您需要将其同样应用于其兄弟td
<tr class="navbarbg navbar-inverse">
<td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td>
<td colspan="2" class="column">
<table class="whitetext" width="400">
<tr>
<td class="smalltext alignright" valign="bottom">
Call: 0161 482 7650<br />
<h2 class="lucidafont">More from Leasing</h2>
</td>
</tr>
</table>
</td>
</tr>
请参阅此更新的小提琴http://jsfiddle.net/ajiths4u/7bm95wrm/1/