<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-4">Store List</th> <th class="col-xs-2">Created</th> <th class="col-xs-2">SetUp</th> <th class="col-xs-2">Active</th> <th class="col-xs-1">Last Updated</th> <th class="col-xs-1"></th> </tr> </thead> <tbody> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2 overflow-text">23</td> <td class="col-xs-1 overflow-text">23</td> <td class="col-xs-1 overflow-text">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none" > <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</td> </tr> <tr> <td class="col-xs-4 border-none"> <div class="col-xs-8 overflow-text">TExt TExt TExtTExt</div> <i class="glyphicon glyphicon-chevron-right"></i></td> <td class="col-xs-2">Mike Adams</td> <td class="col-xs-2">23</td> <td class="col-xs-2">23</td> <td class="col-xs-1">23</td> <td class="col-xs-1">Details</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; } .border-none{ border:none !important; } .overflow-text{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 243px; }