我希望在分频器下一列之后会像响应的东西一样正常工作。
此外，我认为上面的html代码有问题，它的行为不像响应。
这是一个代码示例：https://codepen.io/aman111/pen/YQGzGd?editors=1000
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
@media only screen and (max-width:480px){
table td[class="divider"] {
display: none !important;
}
table td[class="one"] {
width:100% !important;
}
.left {
width: 100% !important;
}
.right {
width: 100% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%">
<tr>
<td class="one" style=" padding:10px 0 10px 10px;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="left" width="100%">
<tr>
<td valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:299px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="divider" style="background-color: red;" width="1"></td>
</tr>
</table>
</td>
<td class="two" style=" padding:10px 10px 10px 0;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="right" width="100%">
<tr>
<td class="divider" style="background-color: red;" width="2"></td>
<td>
<table>
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:300px; padding-left:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>------------------------ Has anyone faced this kind of issue if solve it then please help me out Actually i want after the divider next column will come down like responsive thing works right. Also i think above html code having issue it's not behaving like responsive. Please guys look into this and help me out. Many thanks
</body>
</html>
答案 0 :(得分：0)
这是代码的外观。它考虑到Android没有阅读TD以打破行并使用Gmail应该读取的CSS。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
@media screen and (max-width:480px){
.divider {display: none !important;}
.break th{display:block !important; width:100% !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%" class="break">
<tr>
<th style=" padding:10px 0 10px 10px;font-weight:normal;margin:0px;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="left" width="100%">
<tr>
<td valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:299px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="divider" style="background-color: red;" width="1"></td>
</tr>
</table>
</th>
<th style=" padding:10px 10px 10px 0;font-weight:normal;margin:0px;" width="40%">
<table border="0" cellpadding="0" cellspacing="0" class="right" width="100%">
<tr>
<td class="divider" style="background-color: red;" width="2"></td>
<td>
<table>
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:300px; padding-left:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
请告诉我这是否适合您。
答案 1 :(得分：-1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
@media only screen and (max-width:480px){
table td[class="divider"] {
display: none !important;
}
table[class="left"] {
width: 100% !important;
}
}
@media only screen and (min-width:481px){
table[class="left"] {
width: 50% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border:1px #414141 solid;" width="100%">
<tr>
<table border="0" cellpadding="0" cellspacing="0" style="float:left;" class="left">
<tr>
<td valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-right:20px;">Visitors Per Week</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:299px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/M37UY.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50px; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="divider" style="background-color: red;" width="1"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="float:left;" class="left">
<tr>
<td class="divider" style="background-color: red;" width="2"></td>
<td>
<table>
<tr>
<td style="line-height:20px; height:50px; color:#414141; font-family:'Roboto', sans-serif; padding-left:20px;">Clickthrough Rate</td>
</tr>
<tr>
<td style="line-height:20px; height:50px; width:300px; padding-left:20px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%" width="100%">
<tr>
<td style="width:50%"><img src="https://i.stack.imgur.com/IQ9PP.png"></td>
<td style="color:#414141; font-family:'Roboto', sans-serif; width:50%; text-align:right; font-size:38px;">+1206</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</tr>
</table>------------------------ Has anyone faced this kind of issue if solve it then please help me out Actually i want after the divider next column will come down like responsive thing works right. Also i think above html code having issue it's not behaving like responsive. Please guys look into this and help me out. Many thanks
</body>
</html>