"Groupable Table"
Bootstrap 2.3.2 Snippet by msurguy

<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>

Similar snippets: See More


Comments:

comments powered by Disqus