<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 ----------> <div class="container"> <div class="row"> <div class="panel panel-default"> <div class="panel-heading"> <h4> Fixed Header Scrolling Table </h4> </div> <table class="table table-fixed"> <thead> <tr> <th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th> </tr> </thead> <tbody> <tr> <td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td> </tr> <tr> <td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td> </tr> <tr> <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td> </tr> <tr> <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td> </tr> <tr> <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td> </tr> <tr> <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td> </tr> <tr> <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td> </tr> <tr> <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td> </tr> </tbody> </table> </div> </div> </div>

.table-fixed thead { width: 97%; } .table-fixed tbody { height: 230px; overflow-y: auto; width: 100%; } .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; } .table-fixed tbody td, .table-fixed thead > tr> th { float: left; border-bottom-width: 0; }