<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container"> <div class="row"><h1>Reconcile Summary Report</h1> <div class="col-md-8"> <table class="table table-responsive table-hover"> <thead> <tr> <th width="20%">Group</th> <th colspan="3" width="10%">Devices at Sites</th> <th colspan="3" width="10%">Devices Scanned</th> <th colspan="3" width="10%">Variance</th> <th colspan="3" width="10%">% Control</th> <th colspan="3" width="10%">Units Complete Match</th> <th colspan="3" width="10%">Units Not Match</th> <th colspan="3" width="10%">Variance</th> <th colspan="3" width="10%">% Accurate</th> <th colspan="3" width="10%"># of Sites Not Reconciled</th> <th colspan="3" width="10%"># of Sites</th> <th colspan="3" width="10%">% of Sites Reconciled</th> </tr> </thead> <tbody> <tr class="clickable" data-toggle="collapse" id="global" data-target=".global"> <td>Corporate</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> </tr> <tr class="collapse global clickable" data-toggle="collapse" id="us" data-target=".us"> <td>- West</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> </tr> <tr class="collapse us clickable" data-toggle="collapse" id="fl" data-target=".fl"> <td>- - Portland</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> </tr> <tr class="collapse fl"> <td>- - - <a href="#" onclick="toggle_visibility('MINDU');">MINDU</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> </tr> <tr class="collapse fl"> <td>- - - <a href="#" onclick="toggle_visibility('MINSA');">MINSA</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> </tr> <tr class="collapse global"> <td>- Central</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> <td class="success">105</td> <td class="warning">99+</td> <td class="danger">99+</td> </tr> </tbody> </table> </div>

table .collapse.in { display:table-row; } .bggreen2 {background-color: #048444;} .txt-w {color:white;} .txt-b {color:black;} .bgyellow2 {background-color: #FFD800;} .bgred2 {background-color: #C20001;} .thin-end { border-bottom: 2px solid black; } .sm-box {width: 12px; display: inline-block; after:content: '.'; after:visibility: hidden; height:12px;} .panel-success > .panel-heading a:link {color:white; text-decoration: underline} .panel-warning > .panel-heading a:link {color:black; text-decoration: underline} .panel-danger > .panel-heading a:link {color:white; text-decoration: underline} .panel-success > .panel-heading { color: white; background-color: #048444; } .panel-warning > .panel-heading { color: black; background-color: #FFD800; } .panel-danger > .panel-heading { color: white; background-color: #C20001; } .condensed {margin:0px}