<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="bs-twrapper"> <table class="table table-bordered"> <!-- We are wrapping the thead in an extra tr (nesting) this will allow us to give the body a percentage width --> <thead class="sticky"> <tr> <th>#</th> <th>Name </th> <th>Points</th> </tr> </thead> <!-- We are also wrapping the tbody in an extra tr (nesting) this will allow us to give the body a percentage width --> </table> <table class="table table-bordered"> <tbody> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> <tr> <td>54</td> <td>Mike </td> <td>77</td> </tr> </body> </table> </div> </div> </div>

.bs-twrapper{ height:260px; overflow-x:scroll; overflow-x:hidden; border-bottom:solid 2px #353535; padding-top:39px; } table{ position: relative; margin: 10px auto; padding: 0; width: 100%; height: auto; border-collapse: collapse; text-align: center; } table > thead.sticky{ height:42px; position:fixed; background:#fff; width:100% !important; margin-top:-40px; } table > thead.sticky > tr{ width:500% !important; } table > thead th:nth-of-type(odd) { width:10%; } table > thead th:nth-of-type(even) { width:80%; } table > tbody td:nth-of-type(odd) { width:10%; } table > tbody td:nth-of-type(even) { width:80%; } tbody.scroll{ width:100%; }