我有两个并排的表数据单元，一旦媒体查询以480px触发，我想堆叠。现在，表格是响应式的，但显示：块＆＃34;触发媒体查询后，部分似乎无法正常工作。我有一个＆＃34; block_td＆＃34;分配给他们继承的表数据单元格的类，但我不确定它们为什么不进行堆叠。我有什么小的遗失吗？
这是读取的部分＆＃34;这是我们的第一张桌子！＆＃34;和＆＃34;这是我们的第二张桌子！＆＃34;。
<html lang="en">
<head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
table[class=tblPreHeaderLinks] {
width: 100% !important;
height: 25px !important;
clear: both !important;
float: none !important;
}
/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
/* MOBILE STYLES */
@media screen and (max-width: 480px) {
body[yahoo] .block_td {display: block;}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
div[class="mobilecontent"]{
display: block !important;
max-height: none !important;
}
span[class=swMedallion] {
display:block;
background-image: url('http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/Medallion.jpg') !important;
background-repeat: no-repeat;
background-position: center top!important;
background-size: 100px 96px !important;
padding-right: 0px !important;
padding-bottom: 15px !important;
width: 100px !important;
height: 96px !important;
}
img[class=imgMedallion] {
display: none !important
}
img[class=imgLogo] {
width: 190px !important;
height: 76px !important;
}
td[class=tdLMLogo] {
padding: 0 0 0 0 !important;
}
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"]{
width:100% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"]{
display:none;}
img[class="mobile-hide"]{
display: none !important;
}
img[class="img-max"]{
max-width: 100% !important;
width: 100% !important;
height:auto !important;
}
a.learnMore {
display: block;
text-align: center;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="section-padding"]{
padding: 10px 15px 5px 15px !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"]{
width:100%!important;
}
td[class=tdHeaderLinks] {
font-size: 13px !important;
line-height: 17px !important;
}
td[class=policyNumber] {
font-size: 9px !important;
line-height: 13px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0;" bgcolor="#f6f4f5">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center">
<!--CONTAINER-->
<table cellpadding="0" cellspacing="0" width="600" class="wrapper" bgcolor="#ffffff" >
<tbody><tr>
<td>
<!--HEADER IMAGES-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper" bgcolor="#ffffff">
<tbody><tr>
<td style="padding: 0px 15px 5px 15px;" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="50%" valign="bottom" class="mobile-hide" class="tdLMLogo" align="left">
<a href="%%=RedirectTo(@urlLMCOM)=%%" target="_blank">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/Transactional-LMI-Logo-200x51.jpg" border="0" height="51" width="200" style="display:block" />
</a>
</td>
<td width="50%" align="left" valign="bottom">
<!--[if !mso 9]><!-->
<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;" align="left">
<a href="#" target="_blank">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-LMI-Logo-155x39.jpg" border="0" height="39" width="155" style="display:block" />
</a>
</div>
<!--<![endif]-->
</td> <!-- tdLMLogo -->
<td width="50%" align="right" class="tdMedallion">
<a href="%%=RedirectTo(@urlMedallion)=%%" target="_blank">
<span class="swMedallion">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/Transactional-Medallion-128x130.jpg" alt="" border="0" width="128" height="130" class="imgMedallion" />
</span>
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><!--END OF HEADER IMAGES-->
<!--LM/MY ACCOUNT/POLICY #-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper" bgcolor="#ffffff">
<tbody><tr>
<td style="padding: 15px 15px 5px 15px;" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" font="Arial" style="text-align: right; padding-bottom: 15px; font-family : Arial, Helvetica, sans-serif; font-size:17px; color:#616265; line-height:21px" class="tdHeaderLinks">
<a href="%%=RedirectTo(@urlLMCOM)=%%" target="_blank" style="color:#616265"><strong style="color: #616265; font-weight:normal">LibertyMutual.com</strong></a> |
<a href="%%=RedirectTo(@urlMyAccount)=%%" target="_blank" style="color:#616265"><strong style="color: #616265; font-weight:normal">My Account</strong></a>
</td>
</tr>
<tr>
<td align="left" class="policyNumber" style="text-align: right; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 17px; color: #616265;">
<strong>Policy Number:</strong> %%POLICY_NUMBER%%</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table><!--END OF LM/MY ACCOUNT/POLICY #-->
<!--HELLO CTA-->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper" bgcolor="#ffffff">
<tbody><tr>
<td style="padding: 15px 15px 5px 15px;" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; line-height: 26px; color:#002663;font-weight:bold;">
Hello %%First Name%%,
<br />
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color:#616265;padding-top:10px; padding-right:100px;">
Your area is likely to receive severe storms in the upcoming months. We've prepared information and tips to help protect you and your loved ones this season.
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<a href="#"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Learn-More-139x38.jpg" /></a>
</td>
</tr>
<tr>
<td style="padding: 15px 0px 5px 0px;" class="tdLine">
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="tblLine">
<tr>
<td style="line-height:1px; font-size:1px; background-color:#f6f4f5" class="tdLineActual"> </td>
</tr>
</table> <!-- tblLine -->
</td> <!-- tdLine -->
</tr>
<tr>
<td valign="top" style="text-align:justify; font-family: Ariel, Arial, Helvetica, sans-serif; font-size: 20px; line-height: 24px; color:#002663; padding: 15px 15px 5px 0px;" >
<strong>If you need anything this season, we’re here to help 24/7.</strong>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="580" class="wrapper" bgcolor="#ffffff" align="center">
<tbody><tr>
<td style="padding: 15px 15px 5px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" style="padding:0px 35px 25px 0px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="60" style="padding-right: 10px" >
<a href="https://www.libertymutual.com/claims-insurance?MM_webID=%%WebID%%" target="_blank"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-24-7-50x50.jpg" alt="" border="0"></a>
</td>
<td valign="top" align="left">
<a href="https://www.libertymutual.com/claims-insurance?MM_webID=%%WebID%%" target="_blank" style="font-family:Arial, Helvetica, sans-serif; color:#002163; font-weight:bold; text-decoration:none; font-size:15px; line-height:19px;">24-Hour Claims Assistance</a>
<br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:18px;">Easily file claims online, through our app, or by calling 1-800-2Claims.</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding:0px 35px 25px 0px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="60" style="padding-right: 10px">
<a href="https://www.libertymutual.com/auto-insurance/auto-insurance-benefits/auto-guaranteed-repairs?MM_webID=%%WebID%%" target="_blank"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-Tow-50x50.jpg" alt="" border="0"></a>
</td>
<td valign="top" align="left" >
<a href="https://www.libertymutual.com/auto-insurance/auto-insurance-benefits/auto-guaranteed-repairs?MM_webID=%%WebID%%" target="_blank" style="font-family:Arial, Helvetica, sans-serif; color:#002163; font-weight:bold; text-decoration:none; font-size:15px; line-height:19px;">Guaranteed Repair Network</a>
<br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:18px;">2,000+ quality repair shops that are vetted first-hand by Liberty Mutual.</span><sup style="font-size: 8px;">1</sup>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding:0px 35px 15px 0px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="60" style="padding-right: 10px">
<a href="https://www.libertymutual.com/auto-insurance/understanding-auto-coverages/better-car-replacement?MM_webID=%%WebID%%" target="_blank"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Icon-Better-Car-50x50.jpg" alt="" border="0"></a>
</td>
<td valign="top" align="left">
<a href="https://www.libertymutual.com/auto-insurance/understanding-auto-coverages/better-car-replacement?MM_webID=%%WebID%%" target="_blank" style="font-family:Arial, Helvetica, sans-serif; color:#002163; font-weight:bold; text-decoration:none; font-size:15px; line-height:19px;">Better Car Replacement</a>
<br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:18px;">Trapped in high water or concerned about falling trees? We’ll replace your car with something newer.</span><sup style="font-size: 8px;">2</sup>
</td>
</tr>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--BOTTOM CONTAINER-->
<table border="0" cellpadding="0" cellspacing="0" width="610" class="wrapper" bgcolor="#f6f4f5">
<tbody><tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:10px">
<tbody>
<tr>
<td>
<TABLE BORDER="1" WIDTH="610" cellpadding="0" cellspacing="0" class="wrapper">
<TR>
<TD WIDTH="290" align="left" class="block_td">
<TABLE BORDER="1" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<TR>
<TD>
This is in our first table!
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="290" align="left" class="block_td">
<TABLE BORDER="1" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<TR>
<TD >
And this is in the second table!
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table> <!--END OF BOTTOM CONTAINER-->
</td>
</tr>
<tr>
<td style="padding-top: 10px;" class="tdLine" bgcolor="#f6f4f5">
<table width="100%" align="center" cellpadding="0" cellspacing="0" class="tblLine">
<tr>
<td style="line-height:10px; font-size:10px; background-color:#ecad00" class="tdLineActual"> </td>
</tr>
</table> <!-- tblLine -->
</td> <!-- tdLine -->
</tr>
<tr>
<td bgcolor="#f6f4f5">
<table border="0" cellpadding="0" cellspacing="0" width="610" class="wrapper" bgcolor="#f6f4f5" align="center">
<tbody><tr>
<td align="center" style="padding-top:20px;font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#616265; height: 16px;" class="tdConnect">
Connect with us:
</td> <!--tdConnect -->
</tr>
<tr>
<td class="tdSocial" style="padding-bottom: 15px" align="center">
<table cellpadding="0" width="100" class="tblSocial">
<tbody><tr>
<td class="tdFB" style="padding: 0 5px 0 5px; width: 25%;" align="center">
<a href="%%=RedirectTo(@facebook)=%%" target="_blank">
<img src="http://image.email-libertymutual.com/lib/ffcf14/m/1/social_default_facebook_icon.jpg" height="20" width="20" border="0" alt="Facebook" class="imgFB">
</a>
</td> <!-- tdFB -->
<td class="tdTW" style="padding: 0 5px 0 5px" align="center">
<a href="%%=RedirectTo(@twitter)=%%" target="_blank">
<img src="http://image.email-libertymutual.com/lib/ffcf14/m/1/social_default_twitter_icon.jpg" height="20" width="20" border="0" alt="Twitter" class="imgTW">
</a>
</td> <!-- tdTW -->
<td class="tdIG" style="padding: 0 5px 0 5px" align="center">
<a href="%%=RedirectTo(@instagram)=%%" target="_blank">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/social_default_instagram_icon.jpg" height="20" width="20" border="0" alt="Instagram" class="imgIG">
</a>
</td> <!-- tdIG -->
<td class="tdYT" style="padding: 0 5px 0 5px" align="center">
<a href="%%=RedirectTo(@youtube)=%%" target="_blank">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/social_default_youtube_icon.jpg" height="20" width="20" border="0" alt="YouTube" class="imgYT">
</a>
</td> <!-- tdYT -->
</tr>
</tbody></table> <!--tblSocial -->
</td> <!-- tdSocial -->
</tr>
<tr>
<td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#616265; font-weight:bold; line-height:18px" class="tdQuestions">
Questions?
</td> <!-- tdQuestions -->
</tr>
<tr>
<td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#616265; line-height:18px; padding-bottom:15px" class="tdContact">
<a href="https://www.libertymutual.com/customer-service/contact-us?MM_webID=%%WebID%%" target="_blank" style="color:#616265">
<strong style="color: #616265; font-weight:normal">Contact Us,</strong></a> Tweet us
<a href="%%=RedirectTo(@twitterAsk)=%%" target="_blank" style="color:#616265"><strong style="color: #616265; font-weight:normal">@AskLiberty</strong></a>,
or Ask us on <a href="%%=RedirectTo(@twitterAsk)=%%" target="_blank" style="color:#616265"><strong style="color: #616265; font-weight:normal">Facebook</strong></a>
</td> <!-- tdContact -->
</tr>
<tr>
<td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#616265; font-weight:bold; line-height:18px" class="tdMngTitle">
Manage your policy online:
</td> <!-- tdMngTitle -->
</tr>
<tr>
<td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#616265; line-height:18px; padding-bottom:15px" class="tdRegister">
<a href="https://eservice.libertymutual.com/PmInternetContentserviceWeb/insurance/url?uri=home?&MM_webID=%%WebID%%" target="_blank" style="color:#616265"><strong style="color: #616265; font-weight:normal">My Account</strong></a>
or
<a href="https://eservice.libertymutual.com/PmInternetContentserviceWeb/url?uri=register&MM_webID=%%WebID%%" target="_blank" style="color:#626265"><strong style="color: #616265; font-weight:normal">Register</strong></a>
</td> <!-- tdRegister -->
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#616265; line-height:15px; padding:0 30px 15px 30px" class="tdDisclaimer">
<sup>1</sup>The property damage must be covered by your policy. Guaranteed Repair Network not available in Rhode Island or Massachusetts. In Massachusetts we offer you our Superior Service Program, which is similar to the Guaranteed Repair Network, however, the estimate is completed by a Liberty Mutual appraiser. For more information, speak with your Liberty Mutual Claims Representative.
</td> <!--tdDisclaimer -->
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#616265; line-height:15px; padding:0 30px 15px 30px" class="tdDisclaimer">
<sup>2</sup>Optional coverage. Applies to a covered total loss. Deductible applies. Does not apply to leased vehicles and motorcycles. Not available in NC.
</td> <!--tdDisclaimer -->
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#616265; line-height:15px; padding:0 30px 15px 30px" class="tdDisclaimer">
Liberty Mutual Insurance is licensed in all 50 states and the District of Columbia.
</td> <!--tdDisclaimer -->
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#616265; line-height:15px; padding:0 30px 15px 30px" class="tdLegalese">
This email was sent to <a href="mailto:%%email address%%" style="color:#616265; text-decoration:none" class="grayLinkNoUL">%%email address%%</a>. If you do not wish to receive email messages from Liberty Mutual that are advertising or promotional in
nature, please
<a href="%%unsub_center_url%%" alias="Unsubscribe" style="color:#616265"><strong style="color: #616265; font-weight:normal">unsubscribe</strong></a> now. If you would like to modify your profile,
<a href="%%profile_center_url%%" alias="Update Profile" style="color:#616265"><strong style="color: #616265; font-weight:normal">go here.</strong></a><br><br>
©%%=v(@copyDate)=%% %%Member_Busname%% <a class="grayLinkNoUL" style="text-decoration:none; color:#616265">%%Member_Addr%%, %%Member_City%%, %%Member_State%%, %%Member_PostalCode%%</a>.
</td> <!-- tdLegalese -->
</tr>
<tr>
<td align="center" style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#616265; line-height:15px; padding-bottom:15px; height: 28px;" class="tdAbout">
<a href="http://www.libertymutualgroup.com/omapps/ContentServer?pagename=LMGroup/Views/LMG&MM_webID=%%WebID%%" target="_blank" style="color:#616265">
<strong style="color: #616265; font-weight:normal">About Liberty Mutual</strong></a> |
<a href="http://www.libertymutualgroup.com/omapps/ContentServer?pagename=LMGroup/Views/lmgDisclosure&cid=1138362980102" target="_blank" style="color:#616265">
<strong style="color: #616265; font-weight:normal">Privacy Policy</strong></a>
</td> <!-- tdAbout -->
</tr>
</table>
</td>
</tr>
</tbody></table><!---END OF CONTAINER-->
</td>
</tr>
</tbody></table>
</body>
</html>