<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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"> <div class="span12"> <div class="menu"> <div class="accordion"> <!-- Áreas --> <div class="accordion-group"> <!-- Área --> <div class="accordion-heading area"> <a class="accordion-toggle" data-toggle="collapse" href= "#area1">Área #1</a> </div><!-- /Área --> <div class="accordion-body collapse" id="area1"> <div class="accordion-inner"> <div class="accordion" id="equipamento1"> <table class="table table-striped table-condensed"> <thead id="cabecera"> <tr> <th class="col-lg-3 col-md-3 col-lg-2">Nombre</th> <th class="col-lg-3 col-md-3 col-lg-2" style = "text-align: center;">Fecha de publicación</th> <th class="col-lg-3 col-md-3 col-lg-2" style = "text-align: center;">Cuota</th> <th class="col-lg-3 col-md-3 col-lg-2" style = "text-align: center;">Stake</th> </tr> </thead> <tbody> <tr class="<?php echo $estado; ?>"> <td class="col-md-2 col-lg-2">Nombre</td> <td class="col-md-2 col-lg-2" style = "text-align: center;">Fecha</td> <td class="col-md-2 col-lg-2" style = "text-align: center;">Fecha</td> <td class="col-md-2 col-lg-2" style = "text-align: center;">Fecha</td> </tr> </tbody> </table> </div> </div> </div> </div> </div><!-- /accordion --> </div> </div> </div> </div>

.menu .accordion-heading { position: relative; } .menu .accordion-heading .edit { position: absolute; top: 8px; right: 30px; } .menu .area { border-left: 4px solid #f38787; } .menu .equipamento { border-left: 4px solid #65c465; } .menu .ponto { border-left: 4px solid #98b3fa; } .menu .collapse.in { overflow: visible; }