"FIxed Header Table/ Scroll Table Body"
Bootstrap 3.0.0 Snippet by VHTrung

<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="row"> <h2>FIxed Header Table/ Scroll Table Body</h2> <table class="points_table"> <thead> <tr> <th class="col-xs-1">#</th> <th class="col-xs-7">Team</th> <th class="col-xs-1">S</th> <th class="col-xs-1">M</th> <th class="col-xs-1">L</th> <th class="col-xs-1">O</th> </tr> </thead> <tbody class="points_table_scrollbar"> <tr class="odd"> <td class="col-xs-1">1</td> <td class="col-xs-7">Test Points</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">2</td> <td class="col-xs-7">Test Points 2</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">3</td> <td class="col-xs-7">Test Points 3</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">4</td> <td class="col-xs-7">Test Points 4</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">5</td> <td class="col-xs-7">Test Points 5</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">6</td> <td class="col-xs-7">Test Points 6</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">7</td> <td class="col-xs-7">Test Points 7</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">8</td> <td class="col-xs-7">Test Points 8</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">9</td> <td class="col-xs-7">Test Points 9</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">10</td> <td class="col-xs-7">Test Points 10</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">11</td> <td class="col-xs-7">Test Points 11</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">12</td> <td class="col-xs-7">Test Points 12</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">13</td> <td class="col-xs-7">Test Points 13</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">14</td> <td class="col-xs-7">Test Points 14</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">15</td> <td class="col-xs-7">Test Points 15</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">16</td> <td class="col-xs-7">Test Points 16</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">17</td> <td class="col-xs-7">Test Points 17</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">18</td> <td class="col-xs-7">Test Points 18</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="odd"> <td class="col-xs-1">19</td> <td class="col-xs-7">Test Points 19</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> <tr class="even"> <td class="col-xs-1">20</td> <td class="col-xs-7">Test Points 20</td> <td class="col-xs-1">10</td> <td class="col-xs-1">0</td> <td class="col-xs-1">5</td> <td class="col-xs-1">1</td> </tr> </tbody> </table> </div> </div>
.points_table thead { width: 100%; } .points_table tbody { height: 562px; overflow-y: auto; width: 100%; } .points_table thead tr{ width: 99%; } .points_table tr{ width: 100%; } .points_table thead, .points_table tbody, .points_table tr, .points_table td, .points_table th{ display: inline-block; } .points_table thead{ background: #d91f2d; color: #fff; } .points_table tbody td, .points_table thead > tr> th{ float: left; border-bottom-width: 0; } .points_table>tbody>tr>td, .points_table>tbody>tr>th, .points_table>tfoot>tr>td, .points_table>tfoot>tr>th, .points_table>thead>tr>td, .points_table>thead>tr>th{ padding: 8px; height: 50px; text-align: center; line-height: 32px; } .odd { background: #ffffff; color: #000; } .even { background: #efefef; color: #000; } .points_table_scrollbar{ height: 612px; overflow-y: scroll; } .points_table_scrollbar::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444; } .points_table_scrollbar::-webkit-scrollbar{ width: 1%; min-width: 5px; background-color: #F5F5F5; } .points_table_scrollbar::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent) }

Related: See More


Questions / Comments: