<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- INFORMACION MEJORA <> </> --> <div class="container"> <br> <div class="row"> <h2>SEGUIMIENTO DE MEJORAS</h2> </div> <div class="row"> <div class="col-sm-12"> <div class="bs-calltoaction bs-calltoaction-main"> <div class="row"> <div class="col-md-9 cta-contents"> <table class="table table-default"> <thead> <tr> <th>MEJORA</th> <th><label class="glyphicon glyphicon-list-alt"></label> Total de actividades</th> <th><label class="glyphicon glyphicon-forward"></label> Actividades en curso</th> <th><label class="glyphicon glyphicon-remove"></label>Actividades retrasadas</th> </tr> </thead> <tbody> <tr> <td><a href="#">Mejora 1 </a></td> <td>30</td> <td>15</td> <td>5</td> </tr> <tr> <td><a href="#">Mejora 2 </a></td> <td>20</td> <td>5</td> <td>2</td> </tr> <tr> <td><a href="#">Mejora 3 </a></td> <td>35</td> <td>24</td> <td>10</td> </tr> <tr> <td><a href="#">Mejora 4 </a></td> <td>20</td> <td>10</td> <td>1</td> </tr> <tr> <td><a href="#">Mejora 5 </a></td> <td>40</td> <td>2</td> <td>0</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div>

.cta-contents a { color:white; text-decoration:underline; } .cta-contents a:hover{ color:#eee; } .bs-calltoaction{ position: relative; width:auto; padding: 15px 25px; border: 1px solid black; margin-top: 10px; margin-bottom: 10px; border-radius: 5px; } .bs-calltoaction > .row{ display:table; width: calc(100% + 30px); } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:table-cell; vertical-align:middle; } .cta-contents{ padding-top: 10px; padding-bottom: 10px; } .cta-title{ margin: 0 auto 15px; padding: 0; } .cta-desc{ padding: 0; } .cta-desc p:last-child{ margin-bottom: 0; } .cta-button{ padding-top: 10px; padding-bottom: 10px; } @media (max-width: 991px){ .bs-calltoaction > .row{ display:block; width: auto; } .bs-calltoaction > .row > [class^="col-"], .bs-calltoaction > .row > [class*=" col-"]{ float:none; display:block; vertical-align:middle; position: relative; } .cta-contents{ text-align: center; } } .bs-calltoaction.bs-calltoaction-default{ color: #fff; background-color: #7900d1; border-color: #ccc; } .bs-calltoaction.bs-calltoaction-primary{ color: #fff; background-color: #337ab7; border-color: #2e6da4; } .bs-calltoaction.bs-calltoaction-info{ color: #fff; background-color: #5bc0de; border-color: #46b8da; } .bs-calltoaction.bs-calltoaction-success{ color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .bs-calltoaction.bs-calltoaction-warning{ color: #fff; background-color: #f0ad4e; border-color: #eea236; } .bs-calltoaction.bs-calltoaction-main{ color: #fff; background-color: #2ba593; border-color: #2ba593; } .bs-calltoaction.bs-calltoaction-primary .cta-button .btn, .bs-calltoaction.bs-calltoaction-info .cta-button .btn, .bs-calltoaction.bs-calltoaction-success .cta-button .btn, .bs-calltoaction.bs-calltoaction-warning .cta-button .btn, .bs-calltoaction.bs-calltoaction-danger .cta-button .btn{ border-color:#fff; }