I am not able to get this HTML email to align center or at least Left in Outlook window. I need help figuring out what is set up incorrectly here. Thank you for all your help. I have tried different ways to update and try to center it. It shows like it's center on the minimized view, but when expanded in outlook window, it is all they way to the right.
Your help will be much appreciated to fix this.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
</table>
</body>
</html>
I wrapped an additional table around your 3 column layout, then wrapped that with a center tag, and set all of the surrounding tables and tds to 100% width and align center. See this on JSFiddle.
<html>
<head>
<title>Learning Assignment Changes Notification</title>
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align=" center " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px; " width="560 ">
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#ccffff; ">
<tr>
<td><img src="addlogo " /></td>
<td align="right ">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0 " cellspacing="0 " border="0 " width="100% ">
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText1 " />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Added</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD ">
<CPNT_ID_ADDED/>
</td>
<td class="myTD ">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD ">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText2 " />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Revision Date</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD ">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText3 " />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Deleted</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD ">
<CPNT_ID_DELETED/>
</td>
<td class="myTD ">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD ">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF; ">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:0px;margin:0px;width:100%;background-color:#ebebeb; ">
<tr>
<td valign="top ">
<table align="left " class="column " style="width:300px ">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px; "> </td>
</tr>
<tr>
<td colspan="3 " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>
<!-- end snippet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
html, body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align="center" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px; height:20px;" height="20"> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>
You can include the below CSS for body so it will align content to left
body{
float:left;
}
You can see the sample outpul here
Example And Implementation
Related
I want to get email body from in html format,
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
'description': msg.get('body'),
}
I want to get email body to description but when I use 'description': msg.get('body'), it takes all on text format,
I want to get email body on HTML format
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Christmas Email template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--<![endif]-->
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
#media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
.em_text1 {
font-size: 16px !important;
line-height: 24px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
</style>
</head>
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#efefef">
<table class="em_full_wrap" valign="top" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#efefef" align="center">
<tbody><tr>
<td valign="top" align="center"><table class="em_main_table" style="width:700px;" width="700" cellspacing="0" cellpadding="0" border="0" align="center">
<!--Header section-->
<tbody><tr>
<td style="padding:15px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:12px; line-height:15px; color:#0d1121;" valign="top" align="center">Test Email Sample | View Online</td>
</tr>
</tbody></table></td>
</tr>
<!--//Header section-->
<!--Banner section-->
<tr>
<td valign="top" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img class="em_img" alt="merry Christmas" style="display:block; font-family:Arial, sans-serif; font-size:30px; line-height:34px; color:#000000; max-width:700px;" src="images/05be8b57-6b90-4ebd-ba17-4014c79f2e4b.jpg" width="700" border="0" height="345"></td>
</tr>
</tbody></table></td>
</tr>
<!--//Banner section-->
<!--Content Text Section-->
<tr>
<td style="padding:35px 70px 30px;" class="em_padd" valign="top" bgcolor="#0d1121" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:16px; line-height:30px; color:#ffffff;" valign="top" align="center">This is a sample email which shall be accommodated in a single paragraph</td>
</tr>
<tr>
<td style="font-size:0px; line-height:0px; height:15px;" height="15"> </td>
<!--—this is space of 15px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center">This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px</td>
</tr>
<tr>
<td class="em_h20" style="font-size:0px; line-height:0px; height:25px;" height="25"> </td>
<!--—this is space of 25px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center"> This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase</td>
</tr>
</tbody></table></td>
</tr>
<!--//Content Text Section-->
<!--Footer Section-->
<tr>
<td style="padding:38px 30px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="padding-bottom:16px;" valign="top" align="center"><table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img src="images/fb.png" alt="fb" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/tw.png" alt="tw" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:27px;" width="27" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/yt.png" alt="yt" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;" valign="top" align="center">PRIVACY STATEMENT | TERMS OF SERVICE | RETURNS<br>
© 2017 Companyname. All Rights Reserved.<br>
If you do not wish to receive any further emails from us, please unsubscribe</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td class="em_hide" style="line-height:1px;min-width:700px;background-color:#ffffff;"><img alt="" src="images/spacer.gif" style="max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;" width="700" border="0" height="1"></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<div class="em_hide" style="white-space: nowrap; display: none; font-size:0px; line-height:0px;"> </div>
</body></html>
here is the basic function when creating new ticket (incoming message)
#api.model
def message_new(self, msg, custom_values=None):
""" Overrides mail_thread message_new that is called by the mailgateway
through message_process.
This override updates the document according to the email.
"""
# remove default author when going through the mail gateway. Indeed we
# do not want to explicitly set user_id to False; however we do not
# want the gateway user to be responsible if no other responsible is
# found.
create_context = dict(self.env.context or {})
create_context['default_user_id'] = False
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
}
if custom_values:
defaults.update(custom_values)
res_id = super(ProjectIssue, self.with_context(create_context)).message_new(msg, custom_values=defaults)
issue = self.browse(res_id)
email_list = issue.email_split(msg)
partner_ids = filter(None, issue._find_partner_from_emails(email_list))
issue.message_subscribe(partner_ids)
return res_id
when I add
'description' : msg.get('body'),
I can get the body of the email, but its on text format,
then I check on 'description' and I found this
description = fields.text('Private Note')
that's why I only get text format, not HTML format,
so I change the description format to this
description = fields.Html('Private Note')
then the format of description is back to normal and readable.
I have a table with two rows of headings. I want to set the widths of some of the columns in the second row. I set up a Codepen to test it out. I find that if I remove the first row of headings, it takes the column widths I've specified without a problem. But with the first row of headings, it ignores the widths of the columns in the second row. :(
Please note that I have div's within the th's so I can style the borders.
Here's the Code:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px;
}
.title-22 {
width: 100px;
}
.title-24 {
width: 100px;
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th colSpan="1" class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-23">
<div class="div-title">Value</div>
</th>
<th colSpan="1" class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>
So just to clarify: the question is how to make the Field columns fixed width, while leaving the Value columns to find their own level.
Thank you.
I can't quite understand why and how table lay-outs are calculated, because the algorythm seems pretty complex.
However, you can achieve the desired lay-out by using a good ol' <colgroup>.
There's some not-too-hard to digest info about how to use them in the HTML4 spec | Calculating column width. Note that this also holds true for the new spec (col and colgroup are not deprecated).
Stick this in between <table> and <thead> in your fiddle:
<colgroup>
<col>
<col width="150">
<col>
<col width="150">
<col>
</colgroup>
DEMO working:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px; /* Wont be applied */
}
.title-22 {
width: 100px; /* Wont be applied */
}
.title-24 {
width: 100px; /* Wont be applied */
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<colgroup>
<col width="40">
<col width="100">
<col>
<col width="100">
<col>
</colgroup>
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-23">
<div class="div-title">Value</div>
</th>
<th class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>
I have a requirement to create a report which shows occupancy of beds on a ward, for a date range specified by the user. The end result should look something like this:
.ritz .waffle a { color: inherit; }.ritz .waffle .s1{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s2{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:right;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s4{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s3{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#ffffff;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s0{border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#ffffff;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s5{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#006100;background-color:#c6efce;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s6{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#9c6500;background-color:#ffeb9c;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}
<div class="ritz grid-container" dir="ltr"><table class="waffle no-grid" cellspacing="0" cellpadding="0"><thead><tr><th class="row-header freezebar-origin-ltr"></th><th id="850396799C0" style="width:60px" class="column-headers-background">A</th><th id="850396799C1" style="width:60px" class="column-headers-background">B</th><th id="850396799C2" style="width:60px" class="column-headers-background">C</th><th id="850396799C3" style="width:60px" class="column-headers-background">D</th><th id="850396799C4" style="width:60px" class="column-headers-background">E</th><th id="850396799C5" style="width:60px" class="column-headers-background">F</th><th id="850396799C6" style="width:60px" class="column-headers-background">G</th><th id="850396799C7" style="width:60px" class="column-headers-background">H</th><th id="850396799C8" style="width:60px" class="column-headers-background">I</th><th id="850396799C9" style="width:60px" class="column-headers-background">J</th><th id="850396799C10" style="width:60px" class="column-headers-background">K</th><th id="850396799C11" style="width:60px" class="column-headers-background">L</th><th id="850396799C12" style="width:60px" class="column-headers-background">M</th></tr></thead><tbody><tr style='height:19px;'><th id="850396799R0" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">1</div></th><td class="s0"></td><td class="s1" colspan="8">June</td><td class="s1" colspan="4">July</td></tr><tr style='height:19px;'><th id="850396799R1" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">2</div></th><td class="s0"></td><td class="s2">23</td><td class="s2">24</td><td class="s2">25</td><td class="s2">26</td><td class="s2">27</td><td class="s2">28</td><td class="s2">29</td><td class="s2">30</td><td class="s2">1</td><td class="s2">2</td><td class="s2">3</td><td class="s2">4</td></tr><tr style='height:19px;'><th id="850396799R2" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">3</div></th><td class="s3"></td><td class="s4">Mo</td><td class="s4">Tu</td><td class="s4">We</td><td class="s4">Th</td><td class="s4">Fr</td><td class="s4">Sa</td><td class="s4">SU</td><td class="s4">Mo</td><td class="s4">Tu</td><td class="s4">We</td><td class="s4">Th</td><td class="s4">Fr</td></tr><tr style='height:19px;'><th id="850396799R3" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">4</div></th><td class="s4">Bed 1</td><td class="s5" colspan="9">Sam Smith</td><td class="s3"></td><td class="s3"></td><td class="s3"></td></tr><tr style='height:19px;'><th id="850396799R4" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">5</div></th><td class="s4">Bed 2</td><td class="s6" colspan="11">Doris Grey (Planned</td><td class="s3"></td></tr><tr style='height:19px;'><th id="850396799R5" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">6</div></th><td class="s4">Bed 3</td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s5" colspan="6">Suri Patel</td></tr></tbody></table></div>
The constraint is that I have to build the result page using a single XML document which is dynamically created from a single SQL query.
ritz .waffle a {
color: inherit;
}
.ritz .waffle .s0 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s2 {
border-left: none;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s6 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
}
.ritz .waffle .s7 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: left;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s4 {
border-right: none;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s5 {
border-left: none;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s1 {
border-right: none;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s3 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
<div class="ritz grid-container" dir="ltr">
<table class="waffle" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="row-header freezebar-origin-ltr"></th>
<th id="2029419615C0" style="width:60px" class="column-headers-background">A</th>
<th id="2029419615C1" style="width:60px" class="column-headers-background">B</th>
<th id="2029419615C2" style="width:75px" class="column-headers-background">C</th>
<th id="2029419615C3" style="width:60px" class="column-headers-background">D</th>
<th id="2029419615C4" style="width:60px" class="column-headers-background">E</th>
<th id="2029419615C5" style="width:60px" class="column-headers-background">F</th>
<th id="2029419615C6" style="width:60px" class="column-headers-background">G</th>
<th id="2029419615C7" style="width:185px" class="column-headers-background">H</th>
<th id="2029419615C8" style="width:196px" class="column-headers-background">I</th>
<th id="2029419615C9" style="width:60px" class="column-headers-background">J</th>
<th id="2029419615C10" style="width:74px" class="column-headers-background">K</th>
<th id="2029419615C11" style="width:60px" class="column-headers-background">L</th>
</tr>
</thead>
<tbody>
<tr style='height:19px;'>
<th id="2029419615R0" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">1</div>
</th>
<td class="s0">drank</td>
<td class="s0">wdate</td>
<td class="s0">mdate</td>
<td class="s0">ddate</td>
<td class="s0">mspan</td>
<td class="s1">dcol</td>
<td class="s2 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">patientid</div>
</td>
<td class="s0">patientname</td>
<td class="s1">bedname</td>
<td class="s2 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">bedstate</div>
</td>
<td class="s0">beddate</td>
<td class="s0">bedid</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R1" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">2</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/23/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R2" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">3</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s3">Bed 2</td>
<td class="s3">Planned</td>
<td class="s3">6/23/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R3" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">4</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/23/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R4" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">5</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/24/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R5" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">6</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/24/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R6" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">7</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/24/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R7" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">8</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/25/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R8" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">9</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/25/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R9" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">10</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/25/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R10" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">11</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/26/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R11" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">12</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/26/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R12" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">13</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s7"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/26/2016</td>
<td class="s3">86</td>
</tr>
</tbody>
</table>
</div>
The XML is then in the style
QueryResults ReportName="BedStateGraphical" ReportID="160">
<FieldNames>
<Field name="drank"/>
<Field name="wdate"/>
<Field name="mdate"/>
<Field name="ddate"/>
<Field name="mspan"/>
<Field name="dcol"/>
<Field name="PatientID"/>
<Field name="patientname"/>
<Field name="bedname"/>
<Field name="bedstate"/>
<Field name="beddate"/>
<Field name="bedid"/>
</FieldNames>
<Data RecordCount="112">
<DataRow index="1">
<drank>0</drank>
<wdate>Mo</wdate>
<mdate>June</mdate>
<ddate>23</ddate>
<mspan>9</mspan>
<dcol>1</dcol>
<PatientID>623681</PatientID>
<patientname>Sam Smith</patientname>
<bedname>Bed 1</bedname>
<bedstate>Occupied</bedstate>
<beddate>23/07/2016 00:00:00</beddate>
<bedid>84</bedid>
</DataRow>
<DataRow index="2">
<drank>0</drank>
<wdate>Mo</wdate>
<mdate>June</mdate>
<ddate>23</ddate>
<mspan>11</mspan>
<dcol>1</dcol>
<PatientID>570853</PatientID>
<patientname>Doris Grey</patientname>
<bedname>Bed 2</bedname>
<bedstate>Planned</bedstate>
<beddate>23/07/2016 00:00:00</beddate>
<bedid>85</bedid>
</DataRow>
drank was intended as a ranking column to give me each column, mspan as a calculation of a colspan for that patient. I have full control over the query and can redesign this as needed. Essentially for each client I get a start date and an end date, bed id, and a status.
I started with a fairly simple piece of XSLT:
<xsl:key name="drank" match="//DataRow/drank/text()" use="." />
<xsl:template match="QueryResults">
<div style="margin: 2px; ">
<div style="width: 900px; background-color: #29A2CE; color: #FFFFFF; padding: 5px; font-size: large; font-weight: bold">
Carenotes Bed State Report </div>
<table style="width: 900px;padding-left:20px;">
<tr>
<xsl:for-each select="//DataRow/drank/text()[generate-id() = generate-id(key('drank',.)[1])]">
<td>
<xsl:value-of select="//DataRow/ddate" />
</td>
</xsl:for-each>
</tr>
</table>
This gives me the right number of columns, but the ddate selected is always the same day of the week.
XSL isn't my strong point, and I am limited by the application to V1 standards.
Can anyone give me some help / pointers / advice / solution?
UPDATE:
Thanks to Martin, I have now been able to create the framework for the table. The next challenge is to populate the cells with the patient data. Currently I am trying this:
<table style="width: 900px;padding-left:20px;">
<tr>
<td>
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('mdate',mdate)[1])]">
<td>
<xsl:attribute name="colspan">
<xsl:value-of select="mspan" />
</xsl:attribute>
<xsl:value-of select="mdate" />
</td>
</xsl:for-each>
</tr>
<tr>
<td>
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="ddate" />
</td>
</xsl:for-each>
</tr>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('bedid',bedid)[1])]">
<tr>
<td>
<xsl:value-of select="bedname" />
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="dcol" />
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
This is based on 3 keys:
<xsl:key name="drank" match="DataRow" use="drank" />
<xsl:key name="mdate" match="DataRow" use="mdate" />
<xsl:key name="bedid" match="DataRow" use="bedid" />
However the loop that gets the value of dcol is only returning zeros, rather than a mix of 1s and zeros to represent which days are booked. Of course, what I really want to do, is to colspan across the dates of a booking so that I can put in the patient name and other data, as well as hyperlinking to the booking document.
My brain is running out of ideas for this part however!
Use a relative path, so replace <xsl:value-of select="//DataRow/ddate" /> with <xsl:value-of select="../../ddate"/>.
I would probably restructure the key to <xsl:key name="drank" match="DataRow" use="drank" /> and then the grouping to
<xsl:template match="QueryResults">
<div style="margin: 2px; ">
<div style="width: 900px; background-color: #29A2CE; color: #FFFFFF; padding: 5px; font-size: large; font-weight: bold">
Carenotes Bed State Report </div>
<table style="width: 900px;padding-left:20px;">
<tr>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="ddate" />
</td>
</xsl:for-each>
</tr>
</table>
I am trying to recreate something close to this table:
I am getting weird lines, though, with the way that I've gone about trying to do it. How do I get rid of them? Or could someone tell me the easiest way to achieve what is done in the table pictured above? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>
table
{
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;
}
table.border tr {border: 1px solid black; border-left: 0px solid;
border-right: 0px solid;}
th
{
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;
}
tr.white td
{
color:#000000;
background-color: #ffffff;
}
td,th
{
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;
</style>
</head>
<body>
<body>
<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in microsoft windows</strong></h3>
<table class="border">
<tr>
<th>Code-Page ID</th>
<th style="border: 1px solid black; text-align: center;">Name</th>
<th colspan="2">ACP OEMCP</th>
</tr
<div>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">1200
<br/>1250
<br/>1251</td>
<td style="border: 1px solid black;" rowspan="3">Unicode
<br/>Windows 3.1 Eastern European
<br/>Windows 3.1 Cynillic</td>
<td rowspan="3"><br/>X <br/>X</td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
</div>
<div>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS
<br/>Arabic (ASMO 708)
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
</div>
<div>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
Mansfield University</td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td>
</tr>
</div>
</table>
</body>
</html>
First of all the link of the image sample didn't work here for me :(
But if you mean the vertical lines like line1|line2 are your problem, you can use colspan=2. This will result in something like line1 line2.
Example:
<tr>
<td colspan=2>
</td>
<td>
</td>
</tr>
Hope that will help,
Regards,
Otacon
Your code is a mess! You put two "body" and forgot some "}" and ">".
Apart that the problem was the "td's" in blank that you put inside the "tr". Here you have the code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>
table {
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;
}
table.border tr {
border: 1px solid black;
border-left: 0px solid;
border-right: 0px solid;
}
th{
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;
}
tr.white td {
color:#000000;
background-color: #ffffff;
}
td,th{
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;
}
</style>
</head>
<body>
<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in microsoft windows</strong></h3>
<table class="border">
<tr>
<th>Code-Page ID</th>
<th style="border: 1px solid black; text-align: center;">Name</th>
<th colspan="2">ACP OEMCP</th>
</tr>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">1200
<br/>1250
<br/>1251</td>
<td style="border: 1px solid black;" rowspan="3">Unicode
<br/>Windows 3.1 Eastern European
<br/>Windows 3.1 Cynillic</td>
<td rowspan="3"><br/>X <br/>X</td>
</tr>
<tr class="white">
</tr>
<tr class="white">
</tr>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS
<br/>Arabic (ASMO 708)
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>
<tr class="white">
</tr>
<tr class="white">
</tr>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
Mansfield University</td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td>
</tr>
</table>
</body>
</html>
I think that's what you're looking for.
Hope this answer helped you.
Regards,
LGhost
I want to hide empty cells in table. Here is my code:
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: collapse;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
You can see, empty cell is shown in 2nd row. But I want to hide it. Moreover, I don't want to use border-collapse:separate. Is this possible to hide the empty cell using border-collapse:collapse? I also want to know why this is showing empty cells.
P.S. Using border-collapse: separate is working and does not show empty cells.
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: separate;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
<th>Title three</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
<td class="empty">value</td>
</tr>
</table>
But this does not answer these questions:
Why empty-cells are displayed when border-collapse: collapse is used ?
Why empty cell are not displayed when border-collapse: separate is used ?
If your site doesn't require support for IE 8 and under, you could just use the CSS :empty pseudo-class:
td:empty {
visibility: hidden;
}
table.empty {
width: 350px;
border-collapse: collapse;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
td:empty {
visibility: hidden;
}
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
More about the :empty pseudo-class can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Assuming all cell you want to hide have the class ´.empty()´ I came up with this piece of jQuery:
$(function(){
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty(){
var theCell = $(this);
if(theCell.html().length == 0){
theCell.hide();
}
}
aaaaand... it seems to work. :)
However as hide() doesn't preserve space you run into this problem if you try to do a donut shape.
Luckily there is another question discussing this problematic and the answer is to use
css('visibility','hidden')
Witch you can also find in this fiddle.
I found this solution on a good article I was reading.
I hope it will work for you too:
table {
empty-cells: hide;
}
Best regards!
Try the following
<style type="text/css">
table.empty{
width:350px;
border-collapse: collapse;
empty-cells:hide;
}
td.normal{
border-style:solid;
border-width:1px;
border-color: blue;
}
td.empty{
style:'display=none'
}
</style>
<table >
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="normal">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="empty"></td>
</tr>
</table>
Just used CSS: empty-cells: hide;
Browser supported: Verified Link or Link 2
table {
border-collapse: separate;
empty-cells: hide;
}
NB: You can't use border-collapse: collapse; because it make Disable look empty cell hide
/******Call-Padding**********/
table {
/***
border-collapse: collapse; #Not use it ***/
border-collapse: separate;
empty-cells: hide;
}
td {
border: 1px solid red;
padding: 10px;
}
<table>
<tr>
<th>Head1 </th>
<th>Head2 </th>
<th>Head3 </th>
<th>Head4 </th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td></td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td></td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td></td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
</table>
Here's another sollution, since td:empty didn't work for me:
<style type="text/css">
table {
border-spacing: 0px; // removes spaces between empty cells
border: 1px solid black;
}
tr, td {
border-style: none; // see note below
padding: 0px; // removes spaces between empty cells
line-height: 2em; // give the text some space inside its cell
height: 0px; // set the size of empty cells to 0
}
</style>
The given code will completely remove any space an empty row would otherwise take up.
Unfortunately you have to set border-style: none;, else the borders of empty cells will be painted anyway (which results in thick lines).