responsive issue in HTML mail templates - html

Question

I am developing dynamic HTML templates for sending emails to clients. the template I have developed is working fine on large screens but on medium and small screens I am facing one design issue. the template supposed to be like this
it should be surrounded by light grey color and body with white color. the template I have developed is also the same but for mobiles, it is like this
As you can see the light grey color on the sides is not visible as the content occupied all the space. I need to make it visible for mobile screens as well. I have tried applying some padding and reducing width but it is not working. JSfiddle link is not taking by the stack overflow so dropping it in the comments please check it and any help is very much appreciated. [JSfiddle][3]
/* Take care of image borders and formatting, client hacks */
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.backgroundTable {
margin: 0 auto;
padding: 0;
width: 100% !important;
}
.branding {
display: inline-flex;
align-items: center;
margin-left: 1%;
}
table td {
border-collapse: collapse;
}
.ExternalClass * {
line-height: 115%;
}
.container-for-gmail-android {
min-width: 600px;
background-color: white;
}
/* General styling */
* {
font-family: Helvetica, Arial, sans-serif;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
margin: 0 !important;
height: 100%;
color: #676767;
}
td {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #777777;
text-align: center;
line-height: 21px;
}
th {
padding-top: 12px;
text-align: left;
color: white;
}
.report-table {
border: 3px solid #707070;
margin-top: 20px;
}
.report-table th {
background-color: #333333;
}
.border {
border: 1px solid grey;
}
table {
border-collapse: collapse;
}
/* table [class ~= "report-table"]{
border:1px solid#007770;
} */
.marks {
display: inline-block;
color: white;
width: 50px;
text-align: center;
background-image: linear-gradient(246deg, #0080FF, #072F9C);
line-height: 2;
letter-spacing: 1.6px;
vertical-align: top;
}
.sub {
width: 210px;
display: inline-block;
max-width: 300px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
}
.p-logo {
width: 50px;
float: left;
}
.source {
text-align: left;
}
.white td {
color: white;
}
.attempted {
text-align: left;
}
.attempted p {
/* display: inline-block; */
margin-right: 10px;
float: left;
line-height: 1;
}
.mod-title {
text-align: left;
padding-top: 20px;
}
.mod-title,
.attempted {
padding-left: 15px;
padding-right: 15px;
}
.img {
float: right;
margin-right: 0px;
margin-top: -70px;
margin-bottom: -70px;
width: 152px;
}
.report-table td,
.report-table th {
border: 1px solid gainsboro;
padding: 5px;
text-align: center;
}
.report-table tr:nth-child(even) {
background-color: #f2f2f2;
}
/* .report-table tr:hover {background-color: #ddd;} */
.week {
background-color: gainsboro;
display: inline-block;
padding: 5px;
border-radius: 10px;
/* font-size: 20px; */
margin-bottom: 10px;
}
.weekdays {
color: #0080FF;
background-color: gainsboro;
border: 1px solid white !important;
}
.report-scores {
color: white;
}
.header-lg,
.header-md,
.header-sm {
/* font-size: 32px; */
font-size: 1.5em;
font-weight: 700;
line-height: normal;
padding: 35px 0 0;
color: #4d4d4d;
}
.sub-head {
font-size: 1.5em;
line-height: 2;
padding-bottom: 30px;
letter-spacing: 0.6px;
padding-top: 20px;
}
.header-summary td {
padding-top: 10px;
font-size: 1.6em;
letter-spacing: 1.6px;
padding-bottom: 20px;
font-weight: 600;
}
.header-md {
font-size: 24px;
}
.header-sm {
padding: 5px 0;
font-size: 18px;
line-height: 1.3;
}
.mobile-header-padding-right {
width: 290px;
text-align: right;
padding-left: 10px;
}
.mobile-header-padding-left {
width: 290px;
text-align: left;
padding-left: 10px;
}
.force-width-gmail {
min-width: 600px;
height: 0px !important;
line-height: 1px !important;
font-size: 1px !important;
}
</style><style type="text/css" media="screen">#import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
</style><style type="text/css" media="screen">#media screen {
/* Thanks Outlook 2013! */
* {
font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;
}
}
</style><style type="text/css" media="only screen and (max-width: 480px)">
/* Mobile styles */
#media only screen and (max-width: 480px) {
.mobile-font-xl {
font-size: 30px;
}
.mobile-font-lg {
font-size: 28px;
}
.mobile-font-sm {
font-size: 24px;
}
.mobile-font-md {
font-size: 26px;
}
.img {
display: none;
}
table[class*="container-for-gmail-android"] {
min-width: 290px !important;
width: 100% !important;
}
table[class="w320"] {
width: 320px !important;
}
td[class="bottom_description"] {
font-size: 18px;
}
img[class="force-width-gmail"] {
display: none !important;
width: 0 !important;
height: 0 !important;
}
td[class*="mobile-header-padding-left"] {
width: 160px !important;
padding-left: 0 !important;
}
td[class*="mobile-header-padding-right"] {
width: 160px !important;
padding-right: 10px !important;
font-size: 18px !important;
}
td[class="info-block"] {
display: block !important;
width: 280px !important;
padding-bottom: 40px !important;
}
td[class="info-img"],
img[class="info-img"] {
width: 278px !important;
}
.week {
font-size: 20px;
}
.report-table,
.report-table td {
font-size: 18px;
}
}
</style><style type="text/css" #media="only screen and (min-width:481px) and (max-width:768px)">#media only screen and (min-width:481px) and (max-width:768px) {
td[class="bottom_description"] {
font-size: 18px;
}
td[class*="mobile-header-padding-right"] {
padding-right: 10px !important;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Xamplay - Courses Activated</title>
</head>
<body style="background-color:#f0f0f0;">
<table align="center" cellpadding="0" cellspacing="0" width="770" class="w320">
<tr>
<td width="100%" style="text-align: left;">
<div class="branding">
<img class="p-logo" src="https://xamplay.com/assets/xamplay-logo.png">
<h1 class="source">Xamplay</h1>
</div>
</td>
</tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android w320" width="600">
<tr>
<td align="center" valign="top" width="100%">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td class="header-lg mobile-font-xl" style="color:#4d4d4d;padding-top:40px;">
Hey {{ givenName }}
</td>
</tr>
<tr>
<td style="color:#4d4d4d" class="sub-head mobile-font-lg">
Here's your Weekly Performance Report.
<br> {{ courseName }}
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<center>
<table style="margin-bottom:30px; " width="600" class="w320 coverage-box">
<tr style="color:#4d4d4d">
<td class="mobile-font-md">Modules Studied</td>
<td class="mobile-font-md">Quiz Attempts</td>
<td class="mobile-font-md">Test Attempts</td>
</tr>
<tr class="header-summary" style="color:#4d4d4d">
<td>{{ totalModCount }}</td>
<td>{{ totalQuizCount }}</td>
<td>{{ totalTestCount }}</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" class="content-padding">
<center>
<table align="center" cellspacing="10" cellpadding="0" width="600" class="w320 coverage-box">
<tr>
<td style="text-align: center;-webkit-text-align:center;padding:20px;" class="mobile-font-lg">
<b>startDate - endDate</b></td>
</tr>
<tr>
<td class="header-lg mobile-font-md" style="padding-bottom: 30px;padding-top: 20px;">
How much have you covered :
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<center>
<table style="margin-bottom:10px; " width="600" class="w320 coverage-box">
<!-- display this row for odd indexes -->
{{#each progress}} {{#if index%2==1}}
<tr style="display:inline-block;margin-bottom:20px">
<td style="text-align:left;">
<span class="sub mobile-font-md">
NATA
</span>
<span class="marks mobile-font-sm">94%</span>
</td>
</tr>
{{/if}}
<!-- display this row for even indexes -->
{{#if index%2==0}}
<tr style="float:right;width: 48%;margin-bottom:20px;">
<td style="text-align:left;">
<span class="sub mobile-font-md">
NIFT
</span>
<span class="marks mobile-font-sm">100%</span>
</td>
</tr>
{{/if}} {{/each}}
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #f7f7f7; height: 100px;" class="content-padding">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320 report-table">
<tr>
<th>
<p class="mobile-font-sm">Activity</p>
</th>
<th>
<p class="mobile-font-sm">Study Modules</p>
</th>
<th>
<p class="mobile-font-sm">Quizzes</p>
</th>
<th>
<p class="mobile-font-sm">Tests</p>
</th>
<th>
<p class="mobile-font-sm">Daily Quizes</p>
</th>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Mon</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.mon.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.mon.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.mon.test_count}}</p>
</td>
<td>
{{#each activities.mon.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr class="mobile-font-sm">
<td class="weekdays mobile-font-sm">
<p class="mobile-font-sm">Tue</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.tue.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.tue.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.tue.test_count}}</p>
</td>
<td>
{{#each activities.tue.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr class="mobile-font-sm">
<td class="weekdays">
<p class="mobile-font-sm">Wed</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.wed.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.wed.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.wed.test_count}}</p>
</td>
<td>
{{#each activities.wed.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Thurs</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.thu.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.thu.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.thu.test_count}}</p>
</td>
<td>
{{#each activities.thu.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Fri</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.fri.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.fri.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.fri.test_count}}</p>
</td>
<td>
{{#each activities.fri.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Sat</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sat.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sat.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sat.test_count}}</p>
</td>
<td>
{{#each activities.sat.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
<tr>
<td class="weekdays">
<p class="mobile-font-sm">Sun</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sun.mod_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sun.quiz_count}}</p>
</td>
<td>
<p class="mobile-font-sm">{{activities.sun.test_count}}</p>
</td>
<td>
{{#each activities.sun.dqs}}
<p class="mobile-font-sm">{{score}}</p>
{{/each}}
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320 " align="left">
<tr>
<td class="mod-title mobile-font-lg">
<p><b>Modules Studied</b></p>
</td>
</tr>
<tr>
<td class="attempted mobile-font-md">
{{#each activities.mon.modules}} {{_module.name}} {{/each}} {{#each activities.tue.modules}} {{_module.name}} {{/each}} {{#each activities.wed.modules}} {{_module.name}} {{/each}} {{#each activities.thu.modules}} {{_module.name}} {{/each}} {{#each activities.fri.modules}}
{{_module.name}} {{/each}} {{#each activities.sat.modules}} {{_module.name}} {{/each}} {{#each activities.sun.modules}} {{_module.name}} {{/each}}
</td>
</tr>
<tr>
<td class="mod-title mobile-font-lg">
<p><b>Quiz Attempted</b></p>
</td>
</tr>
<tr>
<td class="attempted mobile-font-md">
{{#each activities.mon.quizzes}} {{quiz.name}} {{/each}} {{#each activities.tue.quizzes}} {{quiz.name}} {{/each}} {{#each activities.wed.quizzes}} {{quiz.name}} {{/each}} {{#each activities.thu.quizzes}} {{quiz.name}} {{/each}} {{#each activities.fri.quizzes}}
{{quiz.name}} {{/each}} {{#each activities.sat.quizzes}} {{quiz.name}} {{/each}} {{#each activities.sun.quizzes}} {{quiz.name}} {{/each}}
</td>
</tr>
<tr>
<td class="mod-title mobile-font-lg">
<p><b>Test Attempted</b></p>
</td>
</tr>
<tr>
<td class="attempted mobile-font-md">
{{#each activities.mon.tests}} {{test.name}} {{/each}} {{#each activities.tue.tests}} {{test.name}} {{/each}} {{#each activities.wed.tests}} {{test.name}} {{/each}} {{#each activities.thu.tests}} {{test.name}} {{/each}} {{#each activities.fri.tests}}
{{test.name}} {{/each}} {{#each activities.sat.tests}} {{test.name}} {{/each}} {{#each activities.sun.tests}} {{test.name}} {{/each}}
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td style="padding: 25px 0 25px">
<p style="color:#6E6E6E;opacity: 0.8;" class="mobile-font-xl">Powered by Xamplay Edutech Pvt Ltd.
</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>

Answer 1

I have checked your code and I should say that your code would not be rendered properly on most of the devices and mail applications. some "div" and "pseudo-classes" have been used and I think you need to reconsider your design to avoid using such elements and syntaxes. Also, please make all of your styles in-line, then it would not be omitted by Mail Servers and Mail Applications. You can use the following link to validate/preview your email template.
Email HTML Validator
But for your primary question, I need to say that making Responsive Tables is a little bit hard and makes user experience issues for the customer, So I believe that you may have the following options to either have Accessibility and Customer Experience together:
1- Rethink about the design and do the design based on Customer Centricity Principles, For example, if your customers are probably using their phones for checking their emails ( most probable option ) so you need to consider that scrolling a Table or following a table on a small screen is not a good experience, so you need to make the design somehow horizontal or grouped in a not table-style block.
2- Put a Call to Action Button that opens a user-specific generated link that does not require user login and show the details with more interactive features like collapsable accordions with the power of Fully Supported CSS and JS engines.
3- Generated PDF and attach it to the email for the users. ( most of the users do not like it because it would need to be downloaded and allocating space on user devices, might it needs some applications to open it, and so forth. )