<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container"> <legend>General Manager</legend> <div class="row col-md-8 col-sm-offset-1"> <div class="panel panel-default panel-table"> <div class="panel-body"> <table class="table table-striped table-bordered table-list"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Display Name</th> <th></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark Ulrich</td> <td>mark</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> <tr> <td>2</td> <td>Jacob Graham</td> <td>jacobg</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>Del</a></td> </tr> <tr> <td>3</td> <td>Larry Freeman</td> <td>freeman</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col col-xs-offset-3 col-xs-6 pull-right"> <a href="#" class="btn btn-primary btn-sm pull-right"><b>+</b> Add person</a> </div> </div> </div> </div> </div> </div> <div class="container"> <legend>Product Manager</legend> <div class="row col-md-8 col-sm-offset-1"> <div class="panel panel-default panel-table"> <div class="panel-body"> <table class="table table-striped table-bordered table-list"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Display Name</th> <th></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark Ulrich</td> <td>mark</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> <tr> <td>2</td> <td>Jacob Graham</td> <td>jacobg</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>Del</a></td> </tr> <tr> <td>3</td> <td>Larry Freeman</td> <td>freeman</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col col-xs-offset-3 col-xs-6 pull-right"> <a href="#" class="btn btn-primary btn-sm pull-right"><b>+</b> Add person</a> </div> </div> </div> </div> </div> </div> <div class="container"> <legend>Tech Lead</legend> <div class="row col-md-8 col-sm-offset-1"> <div class="panel panel-default panel-table"> <div class="panel-body"> <table class="table table-striped table-bordered table-list"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Display Name</th> <th></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark Ulrich</td> <td>mark</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> <tr> <td>2</td> <td>Jacob Graham</td> <td>jacobg</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span>Del</a></td> </tr> <tr> <td>3</td> <td>Larry Freeman</td> <td>freeman</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col col-xs-offset-3 col-xs-6 pull-right"> <a href="#" class="btn btn-primary btn-sm pull-right"><b>+</b> Add person</a> </div> </div> </div> </div> </div> </div> </div>

.btn-group .btn { transition: background-color .3s ease; } .panel-table .panel-body { padding: 0; } .table > thead > tr > th { border-bottom: none; } .panel-footer, .panel-table .panel-body .table-bordered { border-style: none; margin: 0; } .panel-table .panel-body .table-bordered > thead > tr > th:first-of-type { text-align: center; width: 50px; } .panel-table .panel-body .table-bordered > thead > tr > th.col-tools { text-align: center; width: 120px; } .panel-table .panel-body .table-bordered > thead > tr > th:last-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type { border-right: 0; } .panel-table .panel-body .table-bordered > thead > tr > th:first-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type { border-left: 0; } .panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td { border-bottom: 0; } .panel-table .panel-body .table-bordered > thead > tr:first-of-type > th { border-top: 0; }