How would I make this table in the image above responsive with css, under 600px?
Wherein the 1st and 3rd columns are "headers" that turn into a simple list view on screens under 600px, like such-
https://jsfiddle.net/bycxL65r/7
<style>
.details td {
color: #000;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: dotted #555555 1px;
background-color: transparent;
font-size: 16px;
}
.details td strong {
text-transform: uppercase;
}
.details {
border: none;
}
#media only screen and (max-width: 600px) { }
</style>
<div class="details">
<table width="100%">
<thead></thead>
<tbody>
<tr>
<td style="text-align: left; width: 6%;"><span><strong>Led by:</strong></span></td>
<td style="text-align: left; width: 31%;"><span><strong>Corey Parker</strong></span></td>
<td style="text-align: left; width: 10%;"><span><strong>Location:</strong></span></td>
<td style="text-align: left; width: 49%;"><span>The BGB Studio, 10999 Riverside Dr., Suite 301, North Hollywood, CA 91602</span></td>
</tr>
<tr style="background-color: transparent !important;">
<td style="text-align: left; width: 6%;"><span><strong>Dates:</strong></span></td>
<td style="text-align: left; width: 31%;"><span>April 9 - May 14. Sign up NOW as this class fills fast!</span></td>
<td style="text-align: left; width: 10%;"><span><strong>Requirements:</strong></span></td>
<td style="text-align: left; width: 49%;"><span><span style="font-size: 12pt;"><span>By application or invitation only. For actors who are auditioning consistently. </span></span><span style="font-size: 12pt;">There are no make-ups for this 6-week class. <a style="color: #cd2427;" href="http://bramongarciabraun.com/cancellation-policy/">(Cancellation Policy)</a></span></span>
</td>
</tr>
<tr>
<td style="text-align: left; width: 6%;"><span><strong>Duration:</strong></span></td>
<td style="text-align: left; width: 31%;"><span><span>6 weeks. Mondays, 7pm - 10pm.</span></span><span>
</span></td>
<td style="text-align: left; width: 10%;"><span><strong>Cost:</strong></span></td>
<td style="text-align: left; width: 49%;"><span>$480 for the entire 6-week program. 2 installments ($270 & $210).
</span></td>
</tr>
</tbody>
</table>
</div>
Related
I am working on a HTML email newsletter. I have the layout split up via various tables and inline CSS. If you visit https://heathology.github.io/email-newsletter/, you can see a live demo of my newsletter.
There is an image that says Fright Night and it is column 1 of two-columns. I would like to center the image vertically next to the content in column 2. I cannot get the image to bump down.
Below, you will see my css code:
/* two columns */
.two-columns.last {
padding: 15px 0;
}
.two-columns .padding {
padding: 20px;
}
.two-columns .content {
font-size: 15px;
line-height: 20px;
text-align: left;
}
.button {
background-color: #ffffff;
color: #171a1b;
text-decoration: none;
padding: 12px 20px;
border-radius: 5px;
font-weight: bold;
}
.button-dark {
background-color: #171a1b;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
border-radius: 5px;
font-weight: bold;
}
In the HTML below, you can see how I have arranged it via tables:
<!-- TWO COLUMN SECTION -->
<tr>
<td style="background-color: #26292b; color: #ffffff;">
<table width="100%">
<tr>
<td class="two-columns last">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<img src="img/2022-Fright-Night.png" alt="" width="260" style="max-width:260px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<p style="font-weight: bold; font-size: 18px;">Fright Night</p>
<p style="padding-bottom: 16px;">Do you like chills and fright? Then, join St. Auggies' youth at Frontier City's Fright Night on Friday, October 28 from
6:00pm-10:00pm. Tickets are $42.99/per person. Open to youth and adults 12 & up.</p>
Sign Up
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Are there any recommendations? If need be, you can see the full code here.
change in css style for .two-columns .column
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: middle;
text-align: center;
we are tryin to make modify an email for making it work in outlook and media# don't seem to work. im out of idea,
this doesn't seem to work to
here the base model i took for outlook specification with css but it don't seems to work
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
soo i tried simple test with changing the background color first with a nice looking red
but it doesn't seem to actually do something. i don't realy know what i can do
<!--[if mso]>
<style>
.table {
background-color : red !important;
}
.body {
background-color : red !important;
}
</style>
<![endif]-->
</head>
<body
class="clean-body"
style="
margin: 0 auto;
padding: 0 auto ;
-webkit-text-size-adjust: 100%;
color-scheme: light only;">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
background="https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png" width="600" height="auto"
style="
max-width: 600px;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-image: url('https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png'); width:600px; display: block;
background-color : rgb(33, 34, 34);
color-scheme: light only;
width: 100%;
color: #ffffff;
font-family: 'Roboto', sans-serif;
top : -50px;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td style="min-width: 180px; width: 210px; padding-bottom: 37px;">
<table style="margin: 0; padding: 0">
<tbody>
<tr>
<td
style="
padding-left: 42px;
padding-bottom: 1px;
min-width: 83px;
padding-top: 40px;
padding-right: 0px;
"
>
<table>
<tbody>
<tr>
<td style="min-width: 180px">
<div
style="
font-size: 15px;
font-weight: 800;
line-height: 1;
color:rgb(126, 122, 122);filter: brightness(100);
"
>
Inès AZUELOS
</div>
</td>
</tr>
<tr>
<td>
<div
style="
font-size: 13px;
font-weight: 600;
padding-top: 5px;
padding-left: 1px;
color: #3399ff;"
>
Direction - Assistante
</div>
</td>
</tr>
<tr>
<td style="
padding-top: 16px;
padding-left: 2px;
color:rgb(126, 122, 122);filter: brightness(100);
font-size: 13px;
font-weight: 600;"
>
EICIAM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="
padding-left: 41px;
padding-bottom: 2px;
padding-right: 0px;
padding-top: 15px;
min-width: 83px;
"
>
<table>
<tbody>
<tr>
<td alt="logo facebook" title="logofacebook" style="padding: 3px; width : 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block;border :0;"/>
</td>
<td alt="logo linkedin" title="logolinkedin" style="padding: 3px; width: 20px; height: 20px;">
<img style="width: 20px; height: 20px; display: block; border :0;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<!-- --------------------- -->
<td style="padding: 33px 0 0 0; width: 226px; margin-left: 5px ">
<table>
<tbody>
<tr>
<td style="border-left: 1px solid #ffffff67; padding: 7px 0 0 19px;">
<table
style="
font-size: 11px;
color: #212222;
letter-spacing: 0.7px;
"
>
<tbody>
<tr>
<td style="min-width: 170px">
<table>
<tbody>
<tr>
<td alt="phone" title="phone" style="min-width: 19px; padding-top: 2px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td href=""style="color:rgb(126, 122, 122);filter: brightness(100%); padding-top: 5px; padding-left: 10px; font-size: 12px;"> </td>
</tr>
<tr>
<td alt="mail" title="mail" style="padding-top: 13px; width: 20px; height : 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px; font-size: 12px;">
<a href="" style="color:rgb(126, 122, 122);filter: brightness(100);" > </a>
</td>
</tr>
<tr>
<td alt="web" title="web" style="padding-top: 12px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border: 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px;font-size: 12px;">
eiciam.fr
</td>
</tr>
<tr>
<td alt="print" title="print" style="padding-top: 15px;width: 20px; height: 20px; display:inline; border:0;">
<img style="width: 20px; height: 20px; display: block; border :0;" onerror="this.src=';"/>
</td>
<td style="padding-top: 16px; padding-left: 10px">
<a style="color:rgb(126, 122, 122);filter: brightness(100); font-size: 9px" style="color: white;"> N'imprimez que si nécessaire </br> Pensez à l'environnement</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td alt="" title="" style="min-width: 50px; width: 100px; height: 100px; border:0;">
<img src="" style="min-height: 50px; min-width: 50px; width: 100px; height: auto; display: block; border: 0;margin-top: 50px;"/>
</td>
<!-- ------------------------------ -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
The media element is not supported. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The fact is that Outlook uses Word as an editor and rendering engine for message bodies.
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>
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. )
I'm charged with 'rebranding' our IT department communications. I wanted to do our email notifications in pure HTML / CSS to ensure it's portability.
Below is the code, which looks exactly how I want it to in Outlook, however as soon as content is added to the main the words wont wrap correctly and if any content goes further than about 90% of the main content window, the other table components start to stretch!
I've tried all sorts of combinations of 'word-wrap' and 'overflow' at all levels in the table but I can't seem to have it.
My end goal is to have the entire table fixed width, with any long format information expanding down.
<table style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr style="border: 1px solid gray;">
<td style="height: 75px; width: 80px; text-align: center; font-size: 60px; font-weight: bold; color: White; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px; padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td><div style="height: 36; text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</div></td>
</tr>
<tr>
<td><div style="height: 36;text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</div></td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
<tr>
<td colspan="99" style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;">This is the main TD</td>
</tr>
<tr>
<td colspan="99" style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
Any help is greatly appreciated, this one minor issue is taking me way to long to overcome!
Good:
Bad (this is just random, wordwrapped text):
You have a few errors in your html:
you don't need a nested table for the right header section. Just the <div> portions are enough.
you should set widths for the 'Information' and 'Company name' <td> cells to prevent arbitrary wrapping.
your colspan value should be colspan="4", not colspan="99"
Anyways, to solve your problem you can add style="table-layout: fixed;" to your main table element, to allow yourself to set a more predictable table layout.
https://css-tricks.com/fixing-tables-long-strings/
In the end it was definitely related to the use of COLSPAN.
Instead I replaced the 'heading' piece with a nested table and that resolved the issue.
The specific code I used:
<table border="0" cellpadding="0" cellspacing="0" style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
<tr>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;padding: 0px; border-collapse: collapse;">
<tr>
<td style="height: 75px;text-align: center; font-size: 60px; font-weight: bold; color: White; width: 80px; background : #007F0E;border-bottom: 1px solid gray;">i</td>
<td style="height: 75px;width: 200px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
<td style="height: 75px;padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
<table>
<tr>
<td style="text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</td>
</tr>
<tr>
<td style="text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</td>
</tr>
</table>
</td>
<td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
</tr>
</table>
</tr>
<tr>
<td style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;"></td>
</tr>
<tr>
<td style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE"> | </b><b>Ext : </b> XXXX<b style="color: #0088CE"> | </b><b>Email : </b> Link<b style="color: #0088CE"> | </b><b> Portal : </b> Link</td>
</tr>
</table>
It is certainly painful but unfortunately working with in the constraints of not only Outlook, but also our helpdesk application which doesn't allow direct HTML code. The only way is to directly copy a table in (which is why I've tried to contain it all in a single table!)
I'm trying to print a page for which the fiddle is here http://jsfiddle.net/3J8TD/7/show/. The issue is, it is not aligned to center and it is not printing the header in every page. Look at this screenshot.
HTML:
<div style="" class="invoice-parent">
<div class="logo-container">
<div class="float-left"><img width="115" height="86" src="http://fc06.deviantart.net/fs70/i/2010/131/5/8/Dummy_company__Sample_logo_PSD_by_SolidSilver.jpg" ></div>
<div style="margin-top: 35px" class="float-left"><h1>Sample HEALTHCARE</h1></div>
</div>
<br clear="all" style="margin: 60px;">
<div class="left-address">
<u>C&F</u>: 21A/3, XXXXXX Street,<br>
<div style="margin-left:30px">
Collectorate,<br>
Abccde-324245,<br>
Qds dfs.<br>
Contact no. +91- 999999999999.<br>
Email: info#sampledomain.ext
</div>
</div>
<div class="right-address">
<u style="padding-right: 25px;">Corporate office:</u>
<div class="float-right">
78,8th Cross st,<br>
OMR,Koppasa,<br>
Chansoi -224 097.
</div>
</div>
<br clear="all">
<div id="bill_type">INVOICE</div>
<hr>
<div id="tin_cst_dll">
<span id="id-center">CST: 1085914</span>
</div>
<span style="margin-top: -16px;" class="float-left" id="id-left">TIN: 33893767761</span>
<span style="margin-top: -16px;" class="float-right" id="id-right">DL: TRT 2605/20B/2436/21B</span>
<hr>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<td valign="top">
To: <strong id="to_name">Peter Agency</strong>,<br>
<div id="to_addresses">No.4, Fernanderz lane,<br>
Pandy street,<br>
Hobai - 982198. 0782-4379540
</div>
<strong>
<div id="customer_tin" class="float-left">Tin : 33893767754</div>
<div id="customer_dl" style="text-align: right;" class="float-right">DL no. : TRT 2605/20B/5342/21B</div>
<strong>
</strong></strong></td>
<td valign="top">
<div class="float-left" id="invnum"></div> <div class="float-right">Date: 12-07-2014</div><br>
</td>
</tr>
</tbody></table>
<div id="replacement_period" style="visibility: hidden;">Product Replacement for the period 01-03-2014 to 31-03-2014</div>
<table width="100%" border="1" align="left" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<th valign="top">
S.no.
</th>
<th valign="top">
Product name
</th>
<th valign="top">
Packing
</th>
<th valign="top">
Batch no.
</th>
<th valign="top">
MFG Date
</th>
<th valign="top">
EXP date
</th>
<th valign="top">
MRP
</th>
<th valign="top">
Qty
</th>
<th valign="top" id="pts_head">
PTS
</th>
<th valign="top" id="amount_head">
Amount
</th>
</tr>
<tr class="item-row">
<td valign="top">
<div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">1</div>
</td>
<td valign="top">
CLOPS-75
</td>
<td valign="top">
<div class="packing">12</div>
</td>
<td valign="top">
<div class="batch">CL75</div>
</td>
<td valign="top">
<div class="mfg_date">06/2006</div>
</td>
<td valign="top">
<div class="exp_date">06/2022</div>
</td>
<td valign="top">
<div class="cost">575</div>
</td>
<td valign="top">8</td>
<td valign="top">
<div class="pts">414.00</div>
</td>
<td valign="top">
<div class="price">3312.00</div>
</td>
</tr><tr class="item-row"> <td valign="top"> <div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">2</div></td> <td valign="top">CLOPS-A </td> <td valign="top"> <div class="packing">12</div> </td> <td valign="top"> <div class="batch">CLA</div> </td> <td valign="top"> <div class="mfg_date">06/2006</div> </td> <td valign="top"> <div class="exp_date">06/2022</div> </td> <td valign="top"> <div class="cost">575</div> </td> <td valign="top">2</td> <td valign="top"> <div class="pts">414.00</div> </td> <td valign="top"> <div class="price">828.00</div> </td> </tr>
<tr class="item-calc">
<td class="blank vishide" colspan="8">By Cheque or Cash or DD.</td>
<td class="total-line balance">Subtotal</td>
<td class="total-value blank-value"><div id="sub_total">4140.00</div></td>
</tr>
<tr class="item-calc">
<td style="visibility: visible;" class="blank vishide" colspan="8">
Amount in words: <span id="number_in_words">Four thousand three hundred and forty seven rupees only </span>
</td>
<td class="total-line balance">Vat (5%)</td>
<td class="total-value blank-value"><div id="vat">207.00</div></td>
</tr>
<tr class="item-calc">
<td class="blank blank-bottom" colspan="8"> </td>
<td class="total-line balance">Grand Total</td>
<td class="total-value blank-value"><div id="grand_total">4347.00</div></td>
</tr>
</tbody></table>
<br clear="all">
<br clear="all">
<div id="tandc">
<u><b>Terms & Conditions</b></u>
<ul>
<li>All disputes subject to Chanso Jurisdiction only.</li>
<li>Certified that the particulars given above are true and correct.</li>
<li>And the amount indicated represents the price actually charged. </li>
<li>Cheques are subject to realisation for Aura Healthcare.</li>
</ul>
</div>
<div id="aura-signature">
For Sample Healthcare,<br><br><br>
<b>Authorised</b> <b>signatory.</b>
</div>
</div>
CSS:
#media print {
body * {
visibility: hidden;
}
div.invoice-parent, div.invoice-parent * {
visibility: visible;
}
div.invoice-parent {
left: 0;
top: 0;
position: absolute;
}
}
body { font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif"; }
div.invoice-parent { width: 80%; margin: 0 auto; }
div.logo-container { width: 63%; margin: 0 auto; }
div.left-address { float: left; font-size: 15px;}
div.right-address { float: right; font-size: 15px;}
div#to_addresses { margin-left:30px; }
div#replacement_period { font-weight:bold; margin: 10px 0 10px 0; text-align: center; }
div#bill_type { font-size: 15px; font-weight: bold; margin: 20px; text-align: center; }
div#tandc { float: left; font-size: 12px; margin-top: 10px; width: 500px; }
div#aura-signature { margin-top:30px; float:right; }
hr { color: #4B78BB; margin: 20px 0;}
h1 { font-size: 35px; }
.float-left { float: left; }
.float-right { float: right; }
div#tin_cst_dll { left: 50%;
text-align: center;
top: 50%; }
span#id-center { margin:0 auto }
table.invoice-related { border-collapse: collapse; font-size: 13px;}
table.invoice-related td, table.invoice-related th {
border: 1px solid #000000;
padding: 5px;
}
table.invoice-related tr.item-calc {
height: 32px;
border-left: 1px solid #fff;
}
table.invoice-related td.blank {
border: 0 none;
}
table.invoice-related td.blank-value {
border-left: 0 none;
}
table.invoice-related td.blank-bottom {
border-bottom: 1px solid #FFFFFF;
}
table.invoice-related td.total-line {
border-right: 0 none;
text-align: right;
}
textarea { border: 0; overflow: hidden; resize: none; }
input.qty { border: 0 none; width: 40px; }
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
input.qty:hover, input.qty:focus { border: 0 none; overflow: hidden; resize: none; background-color: #EEFF88;}
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
I tried giving various styles for both the parent and child divs. And for priting the header on every page, i tried giving the header fixed. But the logo is overlapping the content from second page. Any kind of help on this is appreciated. Please help.
Note: Please check the print preview of http://jsfiddle.net/3J8TD/7/show/ and not the HTML.
Make some changes in your code,
Decrease the top margin of div to 25px and remove the margin of <h1>
<div style="margin-top: 25px" class="float-left">
<h1 style="margin: 0">Sample HEALTHCARE</h1>
</div>
Add overflow:hidden; to div.logo-container and make the width: 100%
div.logo-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
Check this Demo
Actual View is Here http://jsfiddle.net/amoljawale/3J8TD/8/show/