Jquery UI sortable with table - jquery-ui

Consider the following image.
In the following image, rows are divided as a section of few rows.
I have implemented the Jquery UI sortable with the table but by that, any row can be inserted anywhere in the table.
What I want is, rows can only be sortable within their specific section, for example, a row of one section should not insert in section 2.
So I'm looking for something like validation on jumping say, a row cannot jump another row with a specific class or let me know something else.
Below is the piece of code for jquery.
$(function(){
$("#etemplate_table_id").sortable({ /*etemplate_table_id - table id*/
items:".tbl_row_4", /*tbl_row_4 - class of rows in yellow color*/
cursor:"move"
});
});
Below is code to produce sample html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered tbl_style " id="etemplate_table_id">
<thead>
<tr class="tbl_row_head" "="">
<th>M</th>
<th>W</th>
<th>A</th>
<th>Detailed Description</th>
<th>R-Class</th>
<th>B-Class</th>
<th>E-Category</th>
<th>ML-Category</th>
<th>Labor Rate</th>
<th>QTY</th>
<th>UOM</th>
<th>Duration</th>
<th>Crew Size</th>
<th>Unit Mhrs.</th>
<th>Total Mhrs.</th>
<th>Phase</th>
<th>Total Cost</th>
</tr>
</thead>
<tbody>
<tr class="tbl_row_1" id="H0111">
<td>01</td>
<td colspan="8" class="left_align">House # 109, Vienna Andre</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr class="tbl_row_2" id="01_01-tbl_row_2" name="W002">
<td>01.01</td>
<td colspan="8" class="left_align wbs_master_list_td">Head & Trauma Pt</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>0</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>0</td>
</tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1066">
<td></td>
<td class="cell_grp_brown">01.01.03</td>
<td>1066</td>
<td class="no_wrap_class">Develop Tower Near Yellow East River</td>
<td>DATA1</td>
<td>OM_CL</td>
<td>110100</td>
<td>Contractor</td>
<td>0</td>
<td><input size="1" value="" type="text"></td>
<td>LS</td>
<td class="duration_cell">9 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
<td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
<td>0</td>
<td>2</td><td>0</td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1259">
<td></td>
<td class="cell_grp_brown">01.01.04</td>
<td>1259</td>
<td class="no_wrap_class">Install Marron Wire M001</td>
<td>PCC-1</td>
<td>ME_CL</td>
<td>130100</td>
<td>Testing & Commissioning</td>
<td>0</td>
<td><input size="1" value="" type="text"></td>
<td>Days</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"></select></td>
<td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
<td>0</td>
<td>3</td><td>0</td></tr><tr class="tbl_row_10" id="01_01-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Head & Trauma Pt</td>
<td></td>
<td>16</td>
<td>0</td>
<td></td>
<td>$0</td>
</tr><tr class="tbl_row_2" id="01_02-tbl_row_2" name="W003">
<td>01.02</td>
<td colspan="8" class="left_align wbs_master_list_td">Base Alm 17 SO</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>0</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>0</td>
</tr><tr class="tbl_row_10" id="01_02-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Base Alm 17 SO</td>
<td></td>
<td>0</td>
<td>0</td>
<td></td>
<td>$0</td>
</tr><tr class="tbl_row_2" id="01_03-tbl_row_2" name="W004">
<td>01.03</td>
<td colspan="8" class="left_align wbs_master_list_td">Body Mixed & //le </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>1634</td>
</tr>
<tr class="tbl_row_3">
<td></td>
<td class="cell_grp_brown">Test</td>
<td colspan="7" class="left_align">Activity Description</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>1634</td>
</tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1000">
<td></td>
<td class="cell_grp_brown">01.02.01</td>
<td>1000</td>
<td class="no_wrap_class">Map of Blue carousel</td>
<td>CVENG</td>
<td>NON O & M</td>
<td>140100</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">1 day</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1001">
<td></td>
<td class="cell_grp_brown">01.02.02</td>
<td>1001</td>
<td class="no_wrap_class">Blue Tire Removal</td>
<td>CVENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1002">
<td></td>
<td class="cell_grp_brown">01.02.03</td>
<td>1002</td>
<td class="no_wrap_class">Jet Blue Service A</td>
<td>CVENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>789</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">3 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1003">
<td></td>
<td class="cell_grp_brown">01.02.04</td>
<td>1003</td>
<td class="no_wrap_class">Air Pressure Blue Pin</td>
<td>TRENG</td>
<td>Indirect</td>
<td>180100</td>
<td>Engineering</td>
<td>0</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">4 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="12" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1004">
<td></td>
<td class="cell_grp_brown">01.02.05</td>
<td>1004</td>
<td class="no_wrap_class">Blue Tax Appraisal For Marty James</td>
<td>TRENG</td>
<td>O & M</td>
<td>1301E</td>
<td>Engineering</td>
<td>0</td>
<td><input size="1" value="1" type="text"></td>
<td>HR</td>
<td class="duration_cell">5 days</td>
<td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select></td>
<td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
<td>1</td>
<td>1</td><td><input class="total_cost_input" size="1" value="122" type="text"></td></tr><tr class="tbl_row_10" id="01_03-tbl_row_10">
<td colspan="12" class="right_align">Subtotal For Body Mixed & //le </td>
<td></td>
<td>5</td>
<td>5</td>
<td></td>
<td>$1634</td>
</tr>
</tbody>
</table>
</div>
Below is the css code for this :
.estimatigPortfolioOverview_row_1, .estimatigPortfolioOverview_row_5_right{
border: 1px solid black;
padding: 10px;
}
.estimatigPortfolioOverview_row_5_right,.estimatigPortfolioSplit_row_2,.estimatigPortfolioIchrs_row_2, .estimatigPortfolioIchrs_row_4, .estimatigPortfolioSplit_row_4{
margin-top: 10px;
}
.estimatigPortfolioOverview_row_1 td:nth-child(odd){
font-size: 13px;
}
.estimatigPortfolioOverview_row_1 input[type="text"]{
font-size: 11px;
width: 110px;
}
.estimatigPortfolioOverview_row_1 input[type="checkbox"]{
margin-left: 5px;
}
.estimatigPortfolioOverview_row_1_div_3, .estimatigPortfolioOverview_row_3,.estimatigPortfolioSplit_row_2,.estimatigPortfolioIchrs_row_2, .estimatigPortfolioIchrs_row_4_col_2 table, .estimatigPortfolioSplit_row_4_col_3 table{
border: 1px solid black;
}
.estimatigPortfolioOverview_row_1 td, .estimatigPortfolioOverview_row_1 th, .estimatigPortfolioIchrs_row_4 td, .estimatigPortfolioIchrs_row_4 th, .estimatigPortfolioSplit_row_4 td, .estimatigPortfolioSplit_row_4 th{
border: none !important;
}
.estimatigPortfolioOverview_row_3 label,.estimatigPortfolioOverview_row_5_left .form-group label,.estimatigPortfolioSplit_row_2 label,.estimatigPortfolioIchrs_row_2 label{
margin-right: 10px;
}
.estimatigPortfolioOverview_row_5_left li label{
margin-left: 10px;
}
.estimatigPortfolioOverview_row_4 ul li{
border-left: 1px solid black;
}
.estimatigPortfolioOverview_row_4 ul li:first-child{
border: none;
}
.estimatigPortfolioOverview_row_4 ul li:first-child input{
margin-left: 10px;
}
.estimatigPortfolioOverview_row_3_4_hr,.estimatigPortfolioIchrs_row_2_3_hr{
border: 4px solid #b4b40f;
}
.estimatigPortfolioOverview_row_5_right_2, .estimatigPortfolioOverview_row_7_col_1{
border: 1px solid black;
text-align: center;
}
.estimatigPortfolioOverview_row_7_col_1{
padding: 10px;
}
.estimatigPortfolioOverview_row_6{
margin:10px;
}
.estimatigPortfolioOverview_row_6 button, .estimatigPortfolioIchrs_row_3_footer_button_row button{
border: 1px solid #351f72;
color: #351f72;
background-color: #e9b947;
padding: 0px 20px;
margin-top: 5px;
}
.estimatigPortfolioOverview_row_6, .estimatigPortfolioIchrs_row_3_footer_button_row{
text-align: center;
}
.estimatigPortfolioIchrs_row_3_footer_button_row{
margin: 15px 0px;
}
.padding_less{
padding: unset;
}
.estimatigPortfolioSplit_row_2 span{
font-size: 16px;
font-weight: bold;
color: #e3960a;
}
.estimatigPortfolioSplit_row_3, .estimatigPortfolioOverview_row_3{
margin-top: 20px;
}
.estimatigPortfolioSplit_row_3 table th{
padding: unset;
font-size: 13px;
}
.estimatigPortfolio_top_row li{
float: right;
margin: 10px;
}
.estimatigPortfolioIchrs_row_3{
border: 3px solid #ccc1c1;
}
.glyphicon-one-fine-empty-dot::before{
content: "\25cf";
}
.main_row{
display: block;
font-size: 20px;
font-weight: bold;
margin: 0px;
}
.glyphicon-one-fine-empty-dot{
font-size: 30px;
padding-right: 5px;
}
.glyphicon_dot_1{
color: #daa50f;
}
.glyphicon_dot_2{
color: #8c7dda;
}
.glyphicon_dot_3{
color: #ec3434;
}
.sub_row .glyphicon-plus{
font-size: 12 !important;
margin-right: 12px !important;
color: #000000 !important;
}
.sub_row{
width: 90%;
margin: 3px 6%
}
.sub_row div:first-child{
font-size: 16px;
margin-left: -3%;
color: #0ca6d8;
}
.sub_row .sub_row_right_div{
display: inline-block;
float: right;
text-align: center;
font-size: 12px !important;
margin-right: 15px;
}
.sub_row .sub_row_right_div span:first-child{
text-decoration: underline;
color: #782828 !important;
}
.estimatigPortfolioIchrs_row_3_col_1, .estimatigPortfolioSplit_row_3_col_1{
overflow-y: scroll;
max-height: 350px;
}
.estimatigPortfolioIchrs_row_3_col_1 table th{
font-size: 14px;
}
.estimatigPortfolioIchrs_row_3_col_1 td{
font-size: 13px;
}
.eselection_form{
margin-left: 20px;
}
.estimatigPortfolioOverview_row_4 .list-inline{
overflow-x: scroll;
padding: 15px 0px !important;
}
.tbl_row_head, .tbl_row_1, .tbl_row_10{
background-color: #3399CC;
}
.tbl_row_1{
color: #ffffff;
font-weight: bold;
}
.tbl_row_head th{
white-space: pre;
}
.tbl_row_head th{
font-weight: normal;
}
.ips_template_table_col .table-responsive{
max-height: 600px;
overflow: scroll;
}
.tbl_row_10{
font-size: 12px;
font-weight: bold;
}
.tbl_row_2{
background-color: #E6EDE2;
}
.tbl_row_3, .tbl_row_9{
background-color: #CCDD90;
}
.tbl_row_4, .tbl_row_5, .tbl_row_6, .tbl_row_7, .tbl_row_8, .tbl_row_9{
background-color: #f3f2c1;
}
.tbl_style tr:not(.tbl_row_1):not(.tbl_row_2):not(.tbl_row_10) td:nth-child(2){
background-color: #EEDDDC;
}
.tbl_style tr:not(.tbl_row_1):not(.tbl_row_10) td:nth-child(1){
background-color: #E6EDE2 !important;;
}
.tbl_style > tbody > tr > td, .tbl_style > tbody > tr > th, .tbl_style > tfoot > tr > td, .tbl_style > tfoot > tr > th, .tbl_style > thead > tr > td, .tbl_style > thead > tr > th {
border: 1px solid #000000;
}
.ips_template_table_col{
background-color: #fcfcf1;
padding: 20px;
}
.estimatigPortfolioIchrs_row_4_col_1 table, .estimatigPortfolioSplit_row_4_col_2 table{
font-size: 16px;
}
.estimatigPortfolioIchrs_row_4_col_1 select, .estimatigPortfolioSplit_row_4_col_2 select{
width:90%;
}
.estimatigPortfolioIchrs_row_4_col_2 table:not(a), .estimatigPortfolioSplit_row_4_col_3 table input[type="text"]{
font-size: 13px;
}
.estimatigPortfolioIchrs_row_4_col_2 tr:first-child input, .estimatigPortfolioSplit_row_4_col_3 tr:first-child input{
width:90%;
}
.estimatigPortfolioIchrs_row_4_col_2 tr:last-child input, .estimatigPortfolioSplit_row_4_col_3 tr:last-child input{
width:95%;
}
.estimatigPortfolioIchrs_row_4_col_2 table a, .estimatigPortfolioSplit_row_4_col_3 table a{
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
.estimatigPortfolioIchrs_row_4_col_2 table .vertical_align, .estimatigPortfolioSplit_row_4_col_3 .vertical_align{
vertical-align: bottom;
}
.estimatigPortfolioIchrs_row_4_col_3 table{
font-size: 12px;
}
.estimatigPortfolioIchrs_row_4_heading_div, .estimatigPortfolioSplit_row_4_heading_div, .overview_master_list_estimate_modal_heading_div{
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
margin: 20px 0px;
}
.estimatigPortfolioIchrs_row_4_heading_div span, .overview_master_list_estimate_modal_heading_div span{
border: 1px solid black;
padding: 2px 10%;
}
.estimatigPortfolioSplit_row_4_heading_div span{
border: 1px solid black;
padding: 2px 2%;
}
.estimatigPortfolioSplit_row_4_col_4 table{
font-size: 15px;
}
.estimatigPortfolioSplit_row_4_col_4 thead, .estimatigPortfolioIchrs_row_4_col_3 thead{
border-top: 5px solid #64afe7;
border-bottom: 5px solid #64afe7;
}
#split_testing_commissioning_modal .modal-dialog, #ichrs_non_incremental_cost_modal .modal-dialog, #overview_master_list_estimate_modal .modal-dialog{
width: 85% !important;
}
.modal_table_scroll{
max-height: 40%;
overflow-y: scroll;
}
.etemplate_btn_div{
text-align: center;
margin: 25px 0px 10px 0px;
}
.etemplate_btn_div button{
padding: 0px 10px;
}
.estimatigPortfolioOverview_row_1 table{
margin-bottom: unset;
}
.estimatigPortfolioOverview_row_1_div_0_tbl_pid, .estimatigPortfolioOverview_row_1_div_0_tbl_pin{
margin-left: 13%;
}
#media (max-width: 991px){
.estimatigPortfolioOverview_row_1_div_0_tbl_pj_name{
margin-left: 3%;
}
.estimatigPortfolioSplit_row_4_heading_div span, .overview_master_list_estimate_modal_heading_div span, .estimatigPortfolioIchrs_row_4_heading_div span{
display: block;
white-space: normal;
}
}
#media (min-width: 992px){
.estimatigPortfolioOverview_row_1_div_0_tbl_pj_name input[type="text"]{
width: 100%;
}
.estimatigPortfolioOverview_row_1_div_0_tbl_pj_name{
margin-left: -5%;
}
}
.estimatigPortfolioOverview_row_1_div_3{
padding: 1% 0px;
margin-top: 8px;
}
.estimatigPortfolioOverview_row_1_div_2 select, .estimatigPortfolioOverview_row_1_div_3 select{
width: 70px;
}
#header_div_checkbox{
margin-bottom: 20px;
}
#header_div{
display: none;
}
.master_list_est_row_1_col_1 .table-responsive{
max-height: 400px;
overflow: scroll;
}
#master_excel_file{
display: none;
}
.master_list_est_row_1_col_2{
text-align: center;
}
.left_align, .tbl_row_4 td{
text-align: left;
}
#master_list_modal_on_template .modal-dialog{
width: 85%;
}
.right_align{
text-align: right;
}
.no_wrap_class{
white-space: nowrap;
}
.tbl_row_2 td:nth-child(2){
padding-left: 70px;
}
.tbl_row_3 td:nth-child(2), .tbl_row_4 td:nth-child(2){
padding-left: 100px;
}


Upon testing, I could see no major issues with the code. I did find a few HTML Syntax issues that you should work to correct. Like:
<tr class="tbl_row_head" "="">
This will cause issues.
My testing: https://jsfiddle.net/Twisty/gz28vdbx/1/
JavaScript
$(function() {
$("#etemplate_table_id").sortable({ /*etemplate_table_id - table id*/
items: "* > .tbl_row_4",
/*tbl_row_4 - class of rows in yellow color*/
cursor: "move"
});
});
I was able to sort just the rows that were .tbl_row_4 without issue.
Hope this helps.

Related

Wanted to make it 2 rows & 2 columns but end up getting weird response

<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</section>
</th>
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</table>
</th>
</tr>
I wanted to make it 2 rows 2 columns but seems like it has a conflict. Previously, I've tried div tags but couldn't work too.
result:

You can stack the components by adding two table rows <tr> - so there are two table head (th) elements inside each new row.
The inline CSS seems to be causing some problems too. I didn't have time to clean it all up but just moved the important parts over to a separate CSS. Still needs more styling in order to get the font sizes right and import the Lora font correctly. Of course you could get good results with just positioned divs too instead of tables, maybe someone will post that solution.
tr, th {
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
text-align: center;
}
header {
padding: 30px;
text-align: center;
font-size: 35px;
color: #8c734b;
}
header.span {
font-size: 20px;
font-family: Lora;
}
th {
mso-line-height-rule: exactly;
border-radius: 1px;
padding-top: 50px;
padding-bottom: 20px;
/* padding-left: 30px;
padding-right: 200px; */
}
<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header class="span"><span class="span">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<tr>
<th class="earn points"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<th class="get rewarded"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</tr>
<section class="col-1-2">
<tr>
<th class="early access"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</tr>
</section>
</table>
</th>
</tr>

I found some errors on the structuring of the table. If you wonna create a table with 2 rows and 2 columns, here is a simple example:
<table>
<tr>
<td>Company</td>
<td>Contact</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
</table>
Here some mistake:
The <tr></tr> should be inside the table. Probably the <tr></tr> was passed cause of is outside the table.
You probably forgot a <section></section> tag (not sure if it was wanted)
You have used only one <tr></tr> tag instead two.
Here is the solution code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<tr id="section-6465178" class="section loyalty">
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<section class="col-1-2">
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</section>
</tr>
<tr>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</tr>
</table>
</body>
</html>
If it keeps getting messy then the problem is in your css file. I hope it helped you :)

How do I convert html to pdf with grails rendering?

I have the following template:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>template seldata</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #4B626D;
border-bottom: 1px solid #ddd;
text-align: center;
min-width: 100px;
color: white;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
text-align: center;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<b>Data Encomenda:</b> ${poos.event_date} <br>
<b>Nome:</b>${poos.name}<br>
<b>Morada:</b> Igreja Velha - Santa Comba<br>
<b>Concelho:</b> Ponte de Lima<br>
<b>Codigo Postal:</b> 4990<br>
<b>Codigo da Empresa:</b> 305160<br>
<b>Codigo de Distribuidor:</b>00000<br>
Da visita ao/a V. Cunha - Ponte de Lima - JF no dia 2018-02-27 resulta o seguinte:
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> <b> Encomendas Grosso - Queijo e Manteiga </b> </p>
<table>
<tr class="heading">
<td>
Marca
</td>
<td>
Produto
</td>
<td>
ID GS1
</td>
<td>
Encomenda
</td>
<td>
Data-Entrega
</td>
<td>
Oferta
</td>
<td>
Observações
</td>
</tr>
<tr class="item">
<td>
Limiano
</td>
<td>
Limiano Bola
</td>
<td>
2902310000009
</td>
<td>
40
</td>
<td>
05-03-2018
</td>
<td>
3
</td>
<td>
1 cx em linha a parte
</td>
</tr>
</table>
</div>
</body>
</html>
I am using
ByteArrayOutputStream bytes = pdfRenderingService.render(template: "/templates/offers", model: [poos:poos, tasks:tasks, skus:skus])
But it is throwing errors like:
org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 3; The markup in the document preceding the root element must be well-formed.
What can I do to make this work? I already made some reseach and I find this being something about XML formatting but I can't figure what is wrong. Already went to xHTML validator...
Can someone please help me to figure out how can I make this rendering work? What am I doing wrong?
(If this is exclusively to Grails Rendering, are there other html to pdf libs that I can use? )
Thanks in advance!

Grails Rendering Plugin - Reference Documentation
You must declare DOCTYPE at the start of your GSP like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So your template will be _offers.gsp like follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>template seldata</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #4B626D;
border-bottom: 1px solid #ddd;
text-align: center;
min-width: 100px;
color: white;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
text-align: center;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<b>Data Encomenda:</b> ${poos.event_date} <br>
<b>Nome:</b>${poos.name}<br>
<b>Morada:</b> Igreja Velha - Santa Comba<br>
<b>Concelho:</b> Ponte de Lima<br>
<b>Codigo Postal:</b> 4990<br>
<b>Codigo da Empresa:</b> 305160<br>
<b>Codigo de Distribuidor:</b>00000<br>
Da visita ao/a V. Cunha - Ponte de Lima - JF no dia 2018-02-27 resulta o seguinte:
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> <b> Encomendas Grosso - Queijo e Manteiga </b> </p>
<table>
<tr class="heading">
<td>
Marca
</td>
<td>
Produto
</td>
<td>
ID GS1
</td>
<td>
Encomenda
</td>
<td>
Data-Entrega
</td>
<td>
Oferta
</td>
<td>
Observações
</td>
</tr>
<tr class="item">
<td>
Limiano
</td>
<td>
Limiano Bola
</td>
<td>
2902310000009
</td>
<td>
40
</td>
<td>
05-03-2018
</td>
<td>
3
</td>
<td>
1 cx em linha a parte
</td>
</tr>
</table>
</div>
</body>
</html>
Hope this helps you

IOS 8 ignoring my Media Queries

I've built a responsive email however, on IOS8 (in Apple mail client and in phones browser) the media queries are being ignored. Note: this is across all the IOS 8 iPhones
I've not provided a JSFIDDLE as it doesn't really work for emails since the code is all in one place.
Email can be found here
http://news.yfish.co.uk/e/9F640D904C5C4FC1AAD220AFAE5C37B3/4/preview/
<!DOCTYPE HTML>
<html>
<head>
<title>Rugby World Cup 2015</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; } .ExternalClass { width:100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
body { margin: 0; padding: 0; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse!important; }
body { height: 100%!important; margin: 0; padding: 0; width: 100%!important; background-color: #e6e6e7; }
a:visited { color: #ffffff; }
#media screen {
#font-face {
font-family: 'humanst';
src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot);
src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot?#iefix) format('embedded-opentype'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff2) format('woff2'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff) format('woff'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.ttf) format('truetype'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.svg#humanst521_btroman) format('svg');
font-weight: normal;
font-style: normal;
}
}
#fade {
-webkit-animation: fadeIn 1.5s forwards;
-moz-animation: fadeIn 1.5s forwards;
-o-animation: fadeIn 1.5s forwards;
animation: fadeIn 1.5s forwards;
}
#-webkit-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#-moz-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#-o-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#fadeUp {
-webkit-animation: imagefadeInUp 2s 0.8s forwards;
-moz-animation: imagefadeInUp 2s 0.8s forwards;
-o-animation: imagefadeInUp 2s 0.8s forwards;
animation: imagefadeInUp 2s 0.8s forwards;
visibility: hidden!important;
}
#-webkit-keyframes imagefadeInUp {
0% {opacity: 0; -webkit-transform: translateY(50px);}
50% {opacity: 0; -webkit-transform: translateY(50px); visibility: visible; }
100% {opacity: 1; -webkit-transform: translateX(0); visibility: visible;}
}
#-moz-keyframes imagefadeInUp {
0% {opacity: 0; -moz-transform: translateY(50px);}
50% {opacity: 0; -moz-transform: translateY(50px); visibility: visible;}
100% {opacity: 1; -moz-transform: translateX(0); visibility: visible;}
}
#-o-keyframes imagefadeInUp {
0% {opacity: 0; -o-transform: translateY(50px);}
50% {opacity: 0; -o-transform: translateY(50px); visibility: visible;}
100% {opacity: 1; -o-transform: translateX(0); visibility: visible;}
}
#keyframes imagefadeInUp {
0% {opacity: 0; transform: translateY(50px);}
50% {opacity: 0; transform: translateY(50px); visibility: visible;}
100% {opacity: 1; transform: translateX(0); visibility: visible;}
}
#media screen and (max-width: 600px), and screen (max-device-width: 600px) {
body { width: auto!important; }
table[class="fullWidth"] { width: 100%!important; }
table[class="contentWidth"] { width: 90%!important; }
td[class="center"] { text-align: center!important; }
table[class="centerTable"] { display: block!important; float: none!important; margin: 0 auto!important; }
td[class="fullCell"] { display: block!important; float: none!important; width: 100%!important; }
td[id="padding"] { padding-bottom: 20px!important; }
}
#media screen and (max-width: 520px), and screen (max-device-width: 520px) {
table[class="mainTitle"] { width: 95%!important; }
img[class="imgScale"] { width: 100%!important; height: auto!important; }
}
#media screen and (max-width: 480px), and screen (max-device-width: 480px) {
td[class="mobileCell"] { display: block!important; float: left!important; width: 100%!important; padding: 0!important; }
td[class="mobileHide"] { display: none!important; }
table[class="logoCenter"] { display: block!important; float: none!important; margin: 0 auto!important; margin-bottom: 20px!important; }
table[class="gifScale"] { width: 95%!important; }
}
#media screen and (max-width: 370px), and screen (max-device-width: 370px) {
table[class="mobileTitle"] { width: 90%!important; }
}
</style>
</head>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#e6e6e7">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#e6e6e7" style="background-color: #e6e6e7;"><!-- wrapper -->
<tr>
<td bgcolor="#e6e6e7">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" bgcolor="#595959">
<table width="99%" cellpadding="0" cellspacing="0" border="0" align="left" bgcolor="#595959"><!-- header -->
<tr>
<td height="25">
</td>
</tr>
<tr>
<td width="33%" style="padding-left: 20px;" class="mobileCell">
<table width="105" cellpadding="0" cellspacing="0" border="0" align="left" class="logoCenter">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;" class="img-scale">
</td>
</tr>
</table>
</td>
<td width="33%" align="center" class="mobileCell">
<table width="91" cellpadding="0" cellspacing="0" border="0" align="center"><!-- social -->
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/facebook.png" width="13" height="21" alt="Like us on Facebook" border="0" style="display: block; border: 0;">
</td>
<td width="20">
</td>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/twitter.png" width="22" height="15" alt="Follow us Twitter" border="0" style="display: block; border: 0;">
</td>
<td width="20">
</td>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/mail.png" width="16" height="11" alt="Contact us!" border="0" style="display: block; border: 0;">
</td>
</tr>
</table><!-- end social -->
</td>
<td width="33%" style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 11px; color: #ffffff; line-height: 15px; text-align: right; vertical-align: middle; padding-right: 20px;" valign="middle" class="mobileHide">
It's a crime, not to view online
</td>
</tr>
<tr class="block">
<td height="25">
</td>
</tr>
</table><!-- end header -->
</td>
</tr>
<tr>
<td bgcolor="#ffc216">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffc216">
<tr>
<td height="50">
</td>
</tr>
<tr>
<td align="center">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td align="center">
<table width="505" cellpadding="0" cellspacing="0" border="0" align="center" class="mainTitle">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/title.png" width="505" height="61" alt="Rugby World Cup" style="display: block; border: 0;" class="imgScale" id="fade">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="437" cellpadding="0" cellspacing="0" border="0" align="center" class="gifScale">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/flag.gif" width="437" height="233" alt="Rugby" style="display: block; border: 0;" class="imgScale" id="fadeUp">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" class="fullWidth">
<tr>
<td height="50" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="356" cellpadding="0" cellspacing="0" border="0" align="center" class="mobileTitle">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/titletwo.png" width="356" height="52" alt="Join us on the 19th September" style="display: block; border: 0;" class="imgScale">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td style="font-family: georgia, verdana, sans-serif; font-size: 18px; line-height: 22px; color: #424242; text-align: center; font-style: italic;" bgcolor="#ffffff">
Your V.I.P invitation
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center">
Previewer I’d love if you could join me at our Yellow Fish table for an afternoon and night of hospitality, Yellow Fish style!<br><br>
Aside of full hospitality and category A seats at the fabulous AMEX stadium, I’d like to invite you to stay overnight in Brighton, provide you with transfers to/from the match, enjoy a bit of Brighton nightlife and then brunch on Sunday before you head off. All you have to do is get to Brighton!<br><br>
Kick off is at 16:45 so I’d plan for being in to Brighton around lunch time and once I have more information I’ll firm up details.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td width="50%" valign="top" class="fullCell" id="padding">
<table width="248" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/attending.png" width="248" height="45" alt="I can attend" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
<td width="50%" valign="top" class="fullCell">
<table width="248" cellpadding="0" cellspacing="0" border="0" align="right" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/unable.png" width="248" height="45" alt="I'm unable to attend" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center">
It should be great fun, a great game watching the Bokkers in Brighton and I really hope you can join me.<br><br>
Best
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table width="112" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/maria.png" width="112" height="33" alt="Maria" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100" bgcolor="#ffffff">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td bgcolor="#595959">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#595959" class="fullWidth"><!-- footer -->
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="105" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #ffffff; text-align: center;">
Tel +44 (0) 1273 223 500 | Fax +44 (0) 1273 323 257 | contact#yfish.co.uk<br><br>
Copyright © 2014 Yellow Fish
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
</table><!-- end footer -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- end wrapper -->
</body>
</html>
I've tried removing all other queries and also tried altering Query widths. No luck!
Thanks in advance

Unfortunately, nobody has been able to provide me with a solution.
Fortunately, I have figrued it out. IOS 8 DOES NOT like commas in media queries.
When removing the comma:
#media screen and (max-width: 480px), and screen (max-device-width: 480px) {}
to
#media screen and (max-width: 480px) and screen (max-device-width: 480px) {}
This fixes everything. However, the comma did not cause issues on IOS 7

Responsive table renders perfectly in everything but default iOS 7 mail app

The default iOS 7 (iOS 7.1.1) mail app won't render this table correctly. Chrome, Firefox, and Safari (most recent versions) all render the desktop view and the mobile view perfectly. Internet Explorer renders the desktop view correctly but not the mobile view (which is fine). iOS Safari renders the mobile view perfectly. Here is a JSFiddle which shows it working properly when you resize it. Here is a screenshot of how it renders in iOS Mail.
HTML
<div id="responsive-table">
<table class="body-copy" style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<thead>
<tr>
<th>Item #</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>#####1</td>
<td>Item Description goes here I</td>
<td>1</td>
<td>$9.49</td>
<td>$9.49</td>
</tr>
<tr>
<td>#####2</td>
<td>Item Description goes here II</td>
<td>2</td>
<td>$9.99</td>
<td>$19.98</td>
</tr>
<tr>
<td>#####3</td>
<td>Item Description goes here III</td>
<td>4</td>
<td>$3.79</td>
<td>$15.16</td>
</tr>
<tr>
<td>#####4</td>
<td>Item Description goes here IV</td>
<td>1</td>
<td>$17.94</td>
<td>$17.94</td>
</tr>
<tr>
<td>#####5</td>
<td>Item Description goes here V</td>
<td>3</td>
<td>$4.99</td>
<td>$14.97</td>
</tr>
</tbody>
</table>
</div>
CSS
#media screen and (max-width: 480px) {
/* Force table to not be like tables anymore */
#responsive-table table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#responsive-table tr {
border: 1px solid #ccc;
margin-bottom: 25px;
}
#responsive-table td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 42% !important;
}
#responsive-table td:before {
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
}
#responsive-table td:nth-of-type(1):before {
content:"Item #";
}
#responsive-table td:nth-of-type(2):before {
content:"Description";
}
#responsive-table td:nth-of-type(3):before {
content:"Quantity";
}
#responsive-table td:nth-of-type(4):before {
content:"Price";
}
#responsive-table td:nth-of-type(5):before {
content:"Total";
}
}
#responsive-table{margin:0 0 20px 0;}
#responsive-table table{width:100%;border-collapse:collapse;}
#responsive-table th{background:#43904B;font-weight:bold;color:#FFFFFF;}
#responsive-table td,th{padding:7px 16px;text-align:left;border:0;border-style:solid;border-bottom:thin solid #E6E6E6;}
Some things I have tried:
Sending the email through Apple iCloud mail to the same iPhone. Result: No change.
Viewing the email in the Gmail iOS app. Result: Renders perfectly.
Removed all comments (you never know). Result: No change.
Changed <meta name="viewport" content="width=320, target-densitydpi=device-dpi"> to <meta name="viewport" content="width=device-width, initial-scale=1.0"> Result: No change.
Misc.
If it's any help, this is what useragentstring.com tells me the user agent is for the mail app (I sent myself an email with it in an iframe. No clue if this is correct procedure.).
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201
Which is missing the bit about Safari at the end when you use the browser to view the page.
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53
For the curious, I started with this.
Updates
Added word-wrap: normal !important; to #responsive-table td {} which fixes the vertical text glitch.
Changing position: relative; to position: absolute; results in the following screenshot. This is not what I want, but the Mail app does render it the same way the browser does. It shows that the Mail app does not like position: relative;.

The reason your having trouble is because your using a lot of code which is just plain not supported in email clients. It's easy to make something look good in a browser, when you code for email you've gotta remember to simplify your code to the extreme. No fancy stuff.
Without getting too much into the subject.. you shouldn't use any code that didn't exist when XHTML1 was the standard because most email clients are based on XHTML1 doctype. And you should also try to do as much as humanly possible in HTML rather than CSS because CSS in email sucks.
Things I changed to make your code work:
Styling is defined on each cell because inherence in email is not reliable.
Border styling was removed in favor of the HTML table attributes rules=rows frame=box which produce the same affect
Line-height was converted to a pixel value rather than a percentage because you'll find percentage values are buggy in email sometimes, expecially line-height (which won't work in outlook)
All the advanced CSS you were using was removed because it's totally unsupported in email and just plain wasn't necessary anyway.
CSS positioning properties are not supported (top, right, bottom,left,absolute,relative,etc..)
Here's your complete code. I didn't spend the time matching your content exactly, you'll have to do that yourself. I just duplicated the same section three times to prove the example for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
html,body {width:100% !important;-webkit-text-size-adjust:none;margin:0;}
body, td{-webkit-text-size-adjust:none;}
.ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
.ExternalClass * {line-height: 100%}
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
table.responsive {width:600px;}
#media screen and (max-device-width: 600px), screen and (max-width: 600px) {
table[class="responsive"]{width:100%;}
}
</style>
</head>
<body bgcolor="#ffffff" border="0" style="min-width:100%;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;color:#666666;font-family:Arial,sans-serif;">
<center>
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" class="responsive" rules=rows frame=box style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
<table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
<table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Test Results
iOS Mail
Gmail
AOL
Yahoo

Try max-device-width instead of max-width in your media query. Start with a generous number like 10000 to see if you can get the media query to trigger at all. If it never triggers under any circumstance, there may be something preventing media queries working on your device.
CSS Position, top, left and content won't work in most clients either. Mac has the most generous support however as they use webkit to render emails.
UPDATE:
Here is a basic example of one way to do a list responsively in html email. The trick is to toggle width:100%; display:block; on your <td> elements. This is tested and it looks great in Litmus on all major clients that support media queries.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
#media only screen and (max-width: 600px), screen and (max-device-width: 600px){
table[class="main"] {
width:100% !important;
}
td[class="switch"], td[class="switchA"], td[class="switchB"] {
width:92% !important; /* width needs to be smaller that 100% because of borders */
display:block !important;
}
td[class="switchA"] {
border-top:1px solid #CCCCCC !important;
}
td[class="switchB"] {
border-left:1px solid #CCCCCC !important;
border-top:0;
}
tr[class="spacer"] {
display:block !important;
}
}
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="600" class="main" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="5%" align="center" bgcolor="#FFFFFF">
</td>
<td width="90%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding-top:40px; padding-bottom:40px;">
Some Content Here...
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FAFAFA">
<tr>
<td width="68" class="switch" style="padding:10px; border:1px solid #CCCCCC;" bgcolor="#EEEEEE">
Item #
</td>
<td width="149" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" bgcolor="#FAFAFA">
Description
</td>
<td width="99" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Quantity
</td>
<td width="99" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" bgcolor="#FAFAFA">
Price
</td>
<td width="119" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Total
</td>
</tr>
<tr class="spacer" style="display:none;">
<td height="30" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="68" class="switchA" style="padding:10px; border:1px solid #CCCCCC; border-top:0;" bgcolor="#EEEEEE">
Item #
</td>
<td width="149" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" bgcolor="#FAFAFA">
Description
</td>
<td width="99" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Quantity
</td>
<td width="99" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" bgcolor="#FAFAFA">
Price
</td>
<td width="119" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Total
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding-top:40px; padding-bottom:40px;">
More Content Here...
</td>
</tr>
</table>
</td>
<td width="5%" align="center" bgcolor="#FFFFFF">
</td>
</tr>
</table>
</td></tr></table></body></html>
LITMUS RESULTS:
Outlook 2000:
iPhone 5:
Android 4.2:

I figured it out! Here is a JSFiddle (with a little extra stuff from my full email).
Works in:
Gmail web view
OS X Mavericks
Chrome
Firefox
Safari
Microsoft Outlook 2011
Internet Explorer (Windows 7 virtual machine. Responsive code does not work)
iOS 7
Chrome
Safari
Mail
Mailbox (Loads spacer images with mobile width, renders rest as desktop view)
Windows XP
Microsoft Outlook 2007 (Really close to working. I haven't had time to tweak it for this yet, but it looks like it is just a few pixels too wide.)
HTML
<!-- COLUMN TITLES -->
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td align="center" bgcolor="#fbfbf8">
<table class="w640" border="0" cellpadding="0" cellspacing="0" width="640" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td class="w640 hide" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Item #</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Description</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Qty</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Price</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Total</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END COLUMN TITLES -->
<!--START PRODUCTS-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####1</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 1</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">12</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$9.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$119.88</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--END ROW 1-->
<!--START ROW 2-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####2</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 2</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">1</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$6.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$6.99</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--END ROW 2 -->
<!--START ROW 4-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####4</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 4</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">2</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$9.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$19.98</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
#media screen and (max-width: 480px) {
table[class=w280], td[class=w280], img[class=w280] {
display: block !important;
width: 300px !important;
}
table[class=w640], td[class=w640], img[class=w640], .headercell {
width: 300px !important;
}
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] {
display: none !important;
}
img {
height: auto;
line-height: 100%;
}
table[class=w80] {
width:100% !important
}
table.w80 span.label {
text-align:left !important;
width:35%;
display:inline-block;
vertical-align:top
}
table.w80 span.content {
text-align:left !important;
display:inline-block;
width:60%;
}
table.w80 td.addItemlabel span.label:before {
content:"Item #:";
}
table.w80 td.addDesclabel span.label:before {
content:"Description:";
}
table.w80 td.addQtylabel span.label:before {
content:"Quantity:";
}
table.w80 td.addSinglelabel span.label:before {
content:"Price:";
}
table.w80 td.addTotallabel span.label:before {
content:"Total:";
}
.product {
border-bottom: solid #a7c2b1;
border-width:1px;
}
}
body {
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #ececec;
}
img {
display: block;
outline: none;
border: 0;
text-decoration: none;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table td, table tr {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
#background-table {
margin: 0;
padding: 0;
width: 100% !important;
background-color: #FFFFFF;
line-height: 100% !important;
}
body, td {
font-family:HelveticaNeue, sans-serif;
}

Jenkins: How do I add the most recent Perforce changelist into notification emails?

I have a Jenkins CI setup, and we are using Perforce as our SCM.
I have configured the Email-ext plugin to notify developers when a build breaks, and also when it is fixed.
At the moment the notification email body just uses the $DEFAULT_CONTENT, but I would really like to indicate the most recent Perforce changelist into the email content as this would be more helpful to the developers.
I'm thinking Changelist number, Changelist title and Committer.
Any ideas on how to do this?

Somewhere on the jenkins mailing list I found this template which I think does what you want.
Create a folder "email-templates" in your jenkins root directory, put the file in there and name it "p4htmlmail.jelly".
Then in your jenkins configuration put ${JELLY_SCRIPT,template="p4htmlmail"} in the DEFAULT_CONTENT field of the email-ext plugin configuration.
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/style.css"/>
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/color.css"/>
<STYLE>
a:link,a:visited {
text-decoration: underline;
<!--color: #3B5998;-->
color: #8B9DC3
}
a.success:link,a.success:visited {
text-decoration: underline;
color: #338033;
}
a.failure:link,a.failure:visited {
text-decoration: underline;
color: #900;
}
a.unstable:link,a.unstable:visited {
text-decoration: underline;
color: #F0C000;
}
<!--
body {
background-color: #DFE3EE;
}-->
.pane {
margin-top: 4px;
white-space: nowrap;
}
.pane TD {
padding: 4px 4px 3px 4px;
}
TABLE.pane {
width: 100%;
border: none;
}
TD.style1 {
color: #3B5998;
width: 10%;
}
TD.pane {
padding: 3px 4px 3px 4px;
vertical-align: middle;
}
TD.pane-header {
border-top: 1px #8B9DC3 solid;
border-bottom: 1px #8B9DC3 solid;
background-color: #DFE3EE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #8B9DC3;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-success {
border-top: 1px #338033 solid;
border-bottom: 1px #338033 solid;
background-color: #E0FFE0;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #338033;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-failure {
border-top: 1px #900 solid;
border-bottom: 1px #900 solid;
background-color: #FCC;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #900;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-unstable {
border-top: 1px #F0C000 solid;
border-bottom: 1px #F0C000 solid;
background-color: #FFFFCE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #F0C000;
padding-top: 10px;
padding-bottom: 10px;
}
TH.pane {
font-weight: bold;
}
SPAN.style1 {
font-weight: bold;
color: #8B9DC3;
}
SPAN.success {
color: #338033;
}
SPAN.failure {
color: #900;
}
LI.style1 {
list-style: cirle outside;
}
LI.failure {
list-style: cirle outside;
color: #900;
}
</STYLE>
<BODY>
<j:set var="spc" value="&nbsp;&nbsp;" />
<!-- GENERAL INFO -->
<TABLE class="pane">
<TBODY>
<TR>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<TD colspan="2" class="pane-header-success">
<SPAN>Build Result Summary - <A class="success" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<TD colspan="2" class="pane-header-failure">
<SPAN>Build Result Summary - <A class="failure" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:otherwise>
<TD colspan="2" class="pane-header-unstable">
<SPAN>Build Result Summary - <A class="unstable" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:otherwise>
</j:choose>
</TR>
<TR>
<TD class="style1">Project:</TD>
<TD>${project.name}</TD>
</TR>
<TR>
<TD class="style1">Completion:</TD>
<TD>${it.timestampString}</TD>
</TR>
<TR>
<TD class="style1">Duration:</TD>
<TD>${build.durationString}</TD>
</TR>
<TR>
<TD class="style1">Status:</TD>
<TD>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/blue.png"/>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/red.png"/>
</j:when>
<j:otherwise>
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/yellow.png"/>
</j:otherwise>
</j:choose>
${build.result}
</TD>
</TR>
<TR>
<TD class="style1">Help:</TD>
<TD>
Help text goes here.
</TD>
</TR>
</TBODY>
</TABLE>
<BR/>
<!-- CHANGE SET -->
<j:set var="changeSet" value="${build.changeSet}" />
<j:if test="${changeSet!=null}">
<j:set var="hadChanges" value="false" />
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Code Changes - See full change details</SPAN>
</TD>
</TR>
<j:forEach var="cs" items="${changeSet}" varStatus="loop">
<j:set var="hadChanges" value="true" />
<j:set var="aUser" value="${cs.hudsonUser}"/>
<TR>
<TD colspan="2">
<SPAN class="style1">
Change <B>${cs.changeNumber}</B> by
<B>${aUser!=null?aUser.displayName:cs.author.displayName}: </B>
'${cs.msgAnnotated}'
</SPAN>
</TD>
</TR>
<j:forEach var="p" items="${cs.affectedFiles}">
<TR>
<TD width="2%">
<j:switch on="${p.editType.name}">
<j:case value="add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-ADD.gif"/>
</j:case>
<j:case value="branch">
<IMG SRC="${rooturl}plugin/perforce/icons/action-BRANCH.gif"/>
</j:case>
<j:case value="delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-DELETE.gif"/>
</j:case>
<j:case value="edit">
<IMG SRC="${rooturl}plugin/perforce/icons/action-EDIT.gif"/>
</j:case>
<j:case value="import">
<IMG SRC="${rooturl}plugin/perforce/icons/action-IMPORT.gif"/>
</j:case>
<j:case value="integrate">
<IMG SRC="${rooturl}plugin/perforce/icons/action-INTEGRATE.gif"/>
</j:case>
<j:case value="move_add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_ADD.gif"/>
</j:case>
<j:case value="move_delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_DELETE.gif"/>
</j:case>
<j:default>
${p.editType.name}
</j:default>
</j:switch>
</TD>
<TD><SPAN>${p.path}</SPAN></TD>
</TR>
</j:forEach>
</j:forEach>
<j:if test="${!hadChanges}">
<TR><TD colspan="2">No Changes</TD></TR>
</j:if>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- JUNIT TEST OUTPUT -->
<j:set var="junitResultList" value="${it.JUnitTestResult}" />
<j:if test="${junitResultList.isEmpty()!=true}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Unit Tests - See full test details</SPAN>
</TD>
</TR>
<j:forEach var="junitResult" items="${it.JUnitTestResult}">
<j:forEach var="packageResult" items="${junitResult.getChildren()}">
<TR>
<TD>
Name: ${packageResult.getName()}, Failed: <SPAN class="failure">${packageResult.getFailCount()}</SPAN> test(s), Passed: <SPAN class="success">${packageResult.getPassCount()}</SPAN> test(s), Skipped: ${packageResult.getSkipCount()} test(s), Total: ${packageResult.getPassCount()+packageResult.getFailCount()+packageResult.getSkipCount()} test(s)
</TD>
</TR>
<j:forEach var="failed_test" items="${packageResult.getFailedTests()}">
<TR>
<TD>
<UL>
<B>
<LI class="failure">Failed: ${failed_test.getFullName()}</LI>
</B>
</UL>
</TD>
</TR>
</j:forEach>
</j:forEach>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- CONSOLE OUTPUT -->
<j:getStatic var="resultFailure" field="FAILURE" className="hudson.model.Result"/>
<j:if test="${build.result==resultFailure}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Console Output - See full console details</SPAN>
</TD>
</TR>
<j:forEach var="line" items="${build.getLog(100)}">
<TR>
<TD>${line}</TD>
</TR>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
</BODY>
</j:jelly>

Resources