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.
Here's a codepen example: 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.sstatic.net/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.sstatic.net/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>This is how the code should look. Its taking into account Android not reading TD's to break into rows and using CSS that Gmail should read as well.
<!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.sstatic.net/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.sstatic.net/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>Let me know if this works for you.