Two Rows in thead, Can't Set Column Widths in Second - html-table

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>

Related

How to create html table with subcolumns group?

I want to make a table in html that will be like this:
<style>
BODY { color: black; background-color: white; font-family: Verdana, Arial, Helvetica; font-size: 80% }
TH { font-size: 80% }
TD { font-size: 80% }
TD.Layout { background-color: white}
TH.Title { background-color: #A0E0A0}
TD.Item { background-color: #E8E8E8}
</style>
<TABLE border ="1" cellspacing ="2" cellpadding ="6">
<TR>
<TH class="Title" rowspan = 2>Name</TH>
<TH class="Title" align="center" colspan = 2>2017 statistics</TH>
<TH class="Title" align="center" colspan = 2>2018 statistics</TH>
</TR>
<TR>
<TH class="Title" align="center">Value 1</TH>
<TH class="Title" align="center">Value 2</TH>
<TH class="Title" align="center">Value 1</TH>
<TH class="Title" align="center">Value 2</TH>
</TR>
<TR>
<TH class="Title" align="center">John</TH>
<TD class="Item" align="center">1</TD>
<TD class="Item" align="center">2</TD>
<TD class="Item" align="center">3</TD>
<TD class="Item" align="center">4</TD>
</TR>
<TR>
<TH class="Title" align="center">George</TH>
<TD class="Item" align="center">5</TD>
<TD class="Item" align="center">6</TD>
<TD class="Item" align="center">7</TD>
<TD class="Item" align="center">8</TD>
</TR>
</TABLE>
The point is that in every year there will be 5 or 6 subcolumns and I want to group them somehow in order to be easier for somebody to look at the table and understand which subcolumn belongs to every year without looking the header every time. A nice solution could be different border color for every year.
Two easy solutions that I can think of are:
Styling based on year.
<style>
BODY { color: black; background-color: white; font-family: Verdana, Arial, Helvetica; font-size: 80% }
TH { font-size: 80% }
TD { font-size: 80% }
TD.Layout { background-color: white}
TH.Title { background-color: #A0E0A0}
TD.Item { background-color: #E8E8E8}
.Year2017 {background-color: #145214}
.Year2018 {background-color: #000080}
</style>
<TABLE border ="1" cellspacing ="2" cellpadding ="6">
<TR>
<TH class="Title" rowspan = 2>Name</TH>
<TH class="Year2017" align="center" colspan = 2>2017 statistics</TH>
<TH class="Year2018" align="center" colspan = 2>2018 statistics</TH>
</TR>
<TR>
<TH class="Year2017" align="center">Value 1</TH>
<TH class="Year2017" align="center">Value 2</TH>
<TH class="Year2018" align="center">Value 1</TH>
<TH class="Year2018" align="center">Value 2</TH>
</TR>
<TR>
<TH class="Title" align="center">John</TH>
<TD class="Year2017" align="center">1</TD>
<TD class="Year2017" align="center">2</TD>
<TD class="Year2018" align="center">3</TD>
<TD class="Year2018" align="center">4</TD>
</TR>
<TR>
<TH class="Title" align="center">George</TH>
<TD class="Year2017" align="center">5</TD>
<TD class="Year2017" align="center">6</TD>
<TD class="Year2018" align="center">7</TD>
<TD class="Year2018" align="center">8</TD>
</TR>
</TABLE>
CSS tooltip. Tooltip can represent the year and hence we don't need to look at header for year value.
For reference: https://www.w3schools.com/css/css_tooltip.asp

Email HTML not centering in email. It's sitting on the right side

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

Making Bootstrap table-striped table transparent

I want to make the table transparent and I want to see the background image through the table list which is striped with different colors.
I have tried the following but it didn't work.
<style> #loading {
position: absolute; width: 100%; height: 100%; background: url('http://www.jettools.com/images/animated_spinner.gif') no-repeat center center;
}
</style>
<div id="loading"></div>
<table style="background: transparent !important;">
<thead>
<th></th><th></th><th></th><th></th>
</thead>
<tbody style="background: transparent !important;" >
<tr>
<td title="">
</td>
<td title=""
</td>
<td title="">
</td>
<td title="">
</td>
</tr>
</tfoot> </tfoot>
</tbody>
</table>

XSLT V1 - looping to create a table from XML

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>

Hide empty cells in table

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).