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
Related
So I am having issues converting my responsive carousel table from individual tables to a single table, any help would be much appreciated.
<table class="table-head">
<thead>
<th>Head</th>
</thead>
<tbody>
<tr>
<td>Attr1</td>
</tr>
<tr>
<td>Attr2</td>
</tr>
<tr>
<td>Attr3</td>
</tr>
<tr>
<td>Attr4</td>
</tr>
</tbody>
</table>
<div class="table-scroll carousel">
<table class="carousel-cell">
<th>Title1</th>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title2</th>
<tr>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title3</th>
<tr>
<td>31</td>
</tr>
<tr>
<td>32</td>
</tr>
<tr>
<td>33</td>
</tr>
<tr>
<td>34</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title4</th>
<tr>
<td>41</td>
</tr>
<tr>
<td>42</td>
</tr>
<tr>
<td>43</td>
</tr>
<tr>
<td>44</td>
</tr>
</table>
</div>
To then turn it into something like this
<div class="table-scroll carousel">
<table class="table-head">
<tr class="carousel-cell">
<th>Date</th>
<td>2021</td>
<td>01 June</td>
<td>05 June</td>
<td>05 June</td>
<td>08 June</td>
<td>10 June</td>
<td>16 June</td>
<td>24 June</td>
<td>25 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Details</th>
<td> </td>
<td>Bal b/f</td>
<td>Cheque no 816078</td>
<td>Bank Giro credit</td>
<td>Bank Giro credit</td>
<td>Cheque no 816079</td>
<td>Direct debit</td>
<td>Bank charges</td>
<td>Direct debit</td>
<td>Cheque no 816081</td>
<td>SO payment</td>
<td>BACS payment</td>
<td>CHAPS payment</td>
<td>Interest</td>
</tr>
<tr class="carousel-cell">
<th>Debit</th>
<td>£</td>
<td> </td>
<td>800</td>
<td> </td>
<td> </td>
<td>1,864</td>
<td>700</td>
<td>52</td>
<td>400</td>
<td>1,290</td>
<td>300</td>
<td>100</td>
<td>70</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Credit</th>
<td>£</td>
<td> </td>
<td>2,000</td>
<td>2,500</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20</td>
</tr>
<tr class="carousel-cell">
<th>Balance</th>
<td>£</td>
<td>8,196 C</td>
<td>7,396 C</td>
<td>9,396 C</td>
<td>12,896 C</td>
<td>11,032 C</td>
<td>10,332 C</td>
<td>10,280 C</td>
<td>9,880 C</td>
<td>8,590 C</td>
<td>8,290 C</td>
<td>8,190 C</td>
<td>8,120 C</td>
<td>8,140 C</td>
</tr>
</table>
</div>
The CSS for both looks like this
.table-head {
float: left;
width: 80px;
border-right: 2px solid #333;
border-collapse: collapse
}
.table-scroll {
float: left;
width: calc(100% - 81px);
border-top: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background-color: #AAA;
}
.table-scroll table {
margin-top: -1px;
width: 30%;
min-width: 300px;
max-width: 40%;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #f2f2f2;
color: #0076BF;
}
th, td {
padding: 10px;
border: 1px solid #333;
background-clip: padding-box;
}
td {
background-color: #fff;
}
And the flickity config
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
// options
freeScroll: true,
contain: true,
prevNextButtons: false,
groupCells: true,
cellAlign: 'left'
});
Both are displayed on codepen, multiple tables https://codepen.io/joshuaserpis/pen/ZEojLKR
Single table https://codepen.io/joshuaserpis/pen/oNoOgYN
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 this table structure
I am new to table structure. I want to design the table like in the image. the first column should have bigger width then the other and
table{
background: white;
width: 85%;
margin: 60px auto;
border-spacing: 0;
}
th{
border-bottom: 2px yellow solid;
height: 30px;
font-size: 12px;
display: table-cell;
vertical-align: bottom;
padding-bottom: 2px;
}
<table>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
Work Category
</th>
<th>
Qty
</th>
<th>
Unit/Price
</th>
<th>
Price
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<th width="75%" align="left" style="padding-left:25px;">
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</table>
I don't know how to write only last 2 column i.e subtotal and Rs.
Any help would be great.
Thank You.
Here it is. In case of any question, please ask in the comments.
table{
background: white;
width: 85%;
margin: 60px auto;
border-spacing: 0;
}
table, tr, th, td{
border: 2px yellow solid;
}
th, td{
height: 30px;
font-size: 12px;
display: table-cell;
vertical-align: bottom;
padding-bottom: 2px;
}
.col1{
width: 60%;
}
.col2{
width: 9%;
}
.col3{
width: 12%;
}
.col4{
width: 19%;
}
<table>
<tr>
<th class="col1">Work Category</th>
<th class="col2">QTY</th>
<th class="col3">Unit/Price</th>
<th class="col4">Price</th>
</tr>
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
<tr>
<td class="col1" style="background-color: yellow"></td>
<td class="col2" colspan="2"></td>
<td class="col4"></td>
</tr>
</table>
TH are used for table headers, so instead for any cells that contain data use TD then if you need to combine cells, use rowspan and colspan, you can familiarize yourself with them using the resources below:
Rowspan article W3Schools:
https://www.w3schools.com/tags/att_td_rowspan.asp
Colspan Article W3Schools:
https://www.w3schools.com/tags/att_td_colspan.asp
If you want to add style to a column I would suggest assigning a class and then applying that style to the particular class, you can find that information on W3Schools explained quite well.
Try this.
HTML
<table>
<tr>
<th align="left">
Work Category
</th>
<th>
Qty
</th>
<th>
Unit/Price
</th>
<th>
Price
</th>
</tr>
<tr>
<td align="left">
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left">
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left">
</td>
<td colspan="2"></td>
<td></td>
</tr>
CSS
table{
background: white;
width: 85%;
margin: 60px auto;
/*border-spacing: 0;*/
border-collapse:collapse;
}
th, td{
height: 30px;
font-size: 12px;
display: table-cell;
vertical-align: bottom;
padding-bottom: 2px;
border: 2px solid yellow;
vertical-align: middle;
}
table th:first-child{
width: 60%;
}
table th{
width: 7%;
}
table th:last-child{
width: 20%;
}
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 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).