"Vpi Scorecard"
Bootstrap 3.1.0 Snippet by apatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center"> A Scorecard </h1> </div> <div id="no-more-tables"> <DIV id=rdDataTableDiv-dtScorecardXML class="panel"> <TABLE id=dtScorecardXML class="col-md-12 table-bordered table-striped table-condensed cf"> <COLGROUP> <COL id=colBusinessGoal></COL> <COL id=colMetricName></COL> <COL id=colMetricValueTrend></COL> <COL id=colMetricValue></COL> <COL id=colScoreTrend></COL> <COL id=colScore></COL> <COL id=colScoreRank></COL> <THEAD style="DISPLAY: table-header-group cf" id=yui_3_6_0_1_1419007541902_103> <TR id=yui_3_6_0_1_1419007541902_104> <TH id=cellScorecardName colSpan=7 class="bg-success" scope=col><SPAN>Scorecard:</SPAN><SPAN> </SPAN><SPAN id=lblScorecardName>companyScorecard</SPAN></TH></TR> <TR id=yui_3_6_0_1_1419007541902_102> <TH style="WIDTH: 10%" id=colBusinessGoal-TH scope=col></TH> <TH id=colMetricName-TH scope=col>Metric Name</TH> <TH style="WIDTH: 20px" id=colMetricValueTrend-TH scope=col></TH> <TH id=colMetricValue-TH scope=col>Metric Value</TH> <TH style="WIDTH: 20px" id=colScoreTrend-TH scope=col></TH> <TH id=colScore-TH scope=col>Score</TH> <TH id=colScoreRank-TH scope=col>Rank</TH></TR></THEAD> <TBODY id=yui_3_6_0_1_1419007541902_96> <TR id=yui_3_6_0_1_1419007541902_101> <TD id=cellBusinessGoal_Row1 colSpan=2><SPAN id=lblBusinessGoalName_Row1>Enterprise</SPAN></TD> <TD id=cellGroupMetricValueTrend_Row1><SPAN> </SPAN></TD> <TD id=cellGroupMetricValue_Row1><SPAN> </SPAN></TD> <TD id=cellGroupScoreTrend_Row1><SPAN> </SPAN></TD> <TD id=cellGroupScore_Row1><SPAN id=lblGroupScore_Row1>0.00%</SPAN></TD> <TD id=cellGroupRank_Row1><SPAN> </SPAN></TD></TR> <TR id=yui_3_6_0_1_1419007541902_100 Row="1"> <TD id=colBusinessGoal_Row1></TD> <TD id=colMetricName_Row1 onmousedown="javascript:rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&rdRefreshElementID=divPanel&relatedMetricID=2bad466f-c8fb-49a4-bfcb-9c648a6742a4&rdReport=scorecard','false','',true,null,null,['','',''])" onclick="ShowElement(this.id,'panelRelated','Show','FadeIn')"><SPAN class="clickable "><SPAN id=lblMetricName_Row1>company.month.Average.EvaluationScore</SPAN><SPAN> </SPAN><SPAN>(</SPAN><SPAN id=lblWeighting_Row1>30%</SPAN><SPAN>)</SPAN></SPAN></TD> <TD id=colMetricValueTrend_Row1><SPAN><i style ="color:green" class="fa fa-arrow-circle-up"></i></SPAN></TD> <TD id=colMetricValue_Row1><SPAN id=lblMetricValue_Row1></SPAN></TD> <TD id=colScoreTrend_Row1><SPAN><i style ="color:green" class="fa fa-arrow-circle-up"></i></SPAN></TD> <TD id=colScore_Row1><SPAN id=lblWeightedScore_Row1></SPAN></TD> <TD id=colScoreRank_Row1><SPAN id=lblRank_Row1></SPAN></TD></TR> <TR id=yui_3_6_0_1_1419007541902_99> <TD id=cellBusinessGoal_Row2 colSpan=2><SPAN id=lblBusinessGoalName_Row2>Public Safety</SPAN></TD> <TD id=cellGroupMetricValueTrend_Row2><SPAN> </SPAN></TD> <TD id=cellGroupMetricValue_Row2><SPAN> </SPAN></TD> <TD id=cellGroupScoreTrend_Row2><SPAN> </SPAN></TD> <TD id=cellGroupScore_Row2><SPAN id=lblGroupScore_Row2>99.00%</SPAN></TD> <TD id=cellGroupRank_Row2><SPAN> </SPAN></TD></TR> <TR id=yui_3_6_0_1_1419007541902_98 Row="2"> <TD id=colBusinessGoal_Row2></TD> <TD id=colMetricName_Row2 onmousedown="javascript:rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&rdRefreshElementID=divPanel&relatedMetricID=7b3267a9-fc0b-4074-98fa-7b7b35cecc32&rdReport=scorecard','false','',true,null,null,['','',''])" onclick="ShowElement(this.id,'panelRelated','Show','FadeIn')"><SPAN class="clickable "><SPAN id=lblMetricName_Row2>company.month.Maximum.Calls</SPAN><SPAN> </SPAN><SPAN>(</SPAN><SPAN id=lblWeighting_Row2>50%</SPAN><SPAN>)</SPAN></SPAN></TD> <TD id=colMetricValueTrend_Row2><SPAN><i style ="color:red" class="fa fa-arrow-circle-down"></i></SPAN></TD> <TD id=colMetricValue_Row2 class="bg-danger"><SPAN id=lblMetricValue_Row2>162</SPAN></TD> <TD id=colScoreTrend_Row2 ><SPAN><i style ="color:red" class="fa fa-arrow-circle-down"></i></SPAN></TD> <TD id=colScore_Row2 class="bg-danger"><SPAN id=lblWeightedScore_Row2>81.00%</SPAN></TD> <TD id=colScoreRank_Row2><SPAN id=lblRank_Row2></SPAN></TD></TR> <TR id=yui_3_6_0_1_1419007541902_97 Row="3"> <TD id=colBusinessGoal_Row3></TD> <TD id=colMetricName_Row3 onmousedown="javascript:rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&rdRefreshElementID=divPanel&relatedMetricID=8a128ecd-18be-4b55-a373-77001404bdf5&rdReport=scorecard','false','',true,null,null,['','',''])" onclick="ShowElement(this.id,'panelRelated','Show','FadeIn')"><SPAN id=yui_3_6_0_1_1419007541902_108 class="clickable "><SPAN id=lblMetricName_Row3>company.month.Average.Calls</SPAN><SPAN> </SPAN><SPAN>(</SPAN><SPAN id=lblWeighting_Row3>20%</SPAN><SPAN>)</SPAN></SPAN></TD> <TD id=colMetricValueTrend_Row3><SPAN><i class="fa fa-minus-circle"></i></SPAN></TD> <TD id=colMetricValue_Row3><SPAN id=lblMetricValue_Row3>92</SPAN></TD> <TD id=colScoreTrend_Row3><SPAN><i class="fa fa-minus-circle"></i></SPAN></TD> <TD id=colScore_Row3><SPAN id=lblWeightedScore_Row3>18.00%</SPAN></TD> <TD id=colScoreRank_Row3><SPAN id=lblRank_Row3></SPAN></TD></TR> <TR id=yui_3_6_0_1_1419007541902_95> <TD id=cellMetricName colSpan=2><SPAN id=lblOverallScoreLable>Overall Score:</SPAN></TD> <TD id=cellMetricValueTrend><SPAN> </SPAN></TD> <TD id=cellMetricValue><SPAN> </SPAN></TD> <TD id=cellScoreTrend><SPAN</SPAN></TD> <TD id=cellScore><SPAN id=lblOverallScore></SPAN></TD> <TD id=cellRank><SPAN id=lblOverallRank></SPAN></TD></TR></TBODY></TABLE> <DIV id=rdDataTableDivEnd-dtScorecardXML></DIV></DIV> </div> </div> </div>
@media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } #no-more-tables tr { border: 1px solid #ccc; } #no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } #no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ #no-more-tables td:before { content: attr(data-title); } }

Related: See More


Questions / Comments: