Bootstrap Groupable Table


	<div class="container">
	<div class="row">
        <div class="span12">
    		<div class="menu">
                <div class="accordion">
            		<div class="accordion-group">
            			<div class="accordion-heading country">
                          <img src="http://placehold.it/100x30" alt="country flag" style="float:left; margin: 3px 10px 0 3px; text-align:center;">
            				<a class="accordion-toggle" data-toggle="collapse" href="#country1">Country</a>
            			</div>
            			<div id="country1" class="accordion-body collapse">
            				<div class="accordion-inner">
            					<table class="table table-striped table-condensed">
            						<thead>
            							<tr>
            								<th>Site</th>
            								<th>Clients</th>
            								<th>Primary</th>
            								<th>Secondary</th>
            								<th>DP</th>
            								<th>BDP</th>
            								<th>Status</th>
            							</tr>
            						</thead>   
            						<tbody>
            							<tr>
            								<td>Site-1</td>
            								<td>123</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>OK</td>
            							</tr>
            							<tr>
            								<td>Site-2</td>
            								<td>321</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>OK</td>
            							</tr>
            						</tbody>
            					</table>
            				</div>
            			</div>
            			<div class="accordion-heading country">
                          <img src="http://placehold.it/100x30" alt="country flag" style="float:left; margin: 3px 10px 0 3px; text-align:center;">
            				<a class="accordion-toggle" data-toggle="collapse" href="#country2">Country 2</a>
            			</div>
            			<div id="country2" class="accordion-body collapse">
            				<div class="accordion-inner">
            					<table class="table table-striped table-condensed">
            						<thead>
            							<tr>
            								<th>Site</th>
            								<th>Clients</th>
            								<th>Primary</th>
            								<th>Secondary</th>
            								<th>DP</th>
            								<th>BDP</th>
            								<th>Status</th>
            							</tr>
            						</thead>   
            						<tbody>
            							<tr>
            								<td>Site-1</td>
            								<td>123</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>OK</td>
            							</tr>
            							<tr>
            								<td>Site-2</td>
            								<td>321</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>OK</td>
            							</tr>
            						</tbody>
            					</table>
            				</div>
            			</div>
            			<div class="accordion-heading country">
                          <img src="http://placehold.it/100x30" alt="country flag" style="float:left; margin: 3px 10px 0 3px; text-align:center;">
            				<a class="accordion-toggle" data-toggle="collapse" href="#country3">Country 3</a>
            			</div>
            			<div id="country3" class="accordion-body collapse">
            				<div class="accordion-inner">
            					<table class="table table-striped table-condensed">
            						<thead>
            							<tr>
            								<th>Site</th>
            								<th>Clients</th>
            								<th>Primary</th>
            								<th>Secondary</th>
            								<th>DP</th>
            								<th>BDP</th>
            								<th>Status</th>
            							</tr>
            						</thead>   
            						<tbody>
            							<tr>
            								<td>Site-1</td>
            								<td>123</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>OK</td>
            							</tr>
            							<tr>
            								<td>Site-2</td>
            								<td>321</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>-</td>
            								<td>OK</td>
            							</tr>
            						</tbody>
            					</table>
            				</div>
            			</div>
            		</div>
            	</div>
            </div>
        </div>
	</div>
</div>
	<script type="text/javascript">
	
	</script>