<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"> <h2>Table fixed row header</h2> </div> <table class="table table-fixed table-striped"> <thead> <tr> <th>Row</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Amin</td> <td>Saffarnejad</td> <td>27</td> <td>Ahvaz</td> </tr> <tr> <td>2</td> <td>Hassan</td> <td>Faghihi</td> <td>28</td> <td>Khur</td> </tr> <tr> <td>3</td> <td>Manoucehr</td> <td>Kouhi</td> <td>27</td> <td>Abadan</td> </tr> <tr> <td>4</td> <td>Hafez</td> <td>Mir shafieian</td> <td>29</td> <td>Esfahan</td> </tr> <tr> <td>5</td> <td>Ehsan</td> <td>Jahangard</td> <td>23</td> <td>Andika</td> </tr> <tr> <td>6</td> <td>Diako</td> <td>Mahmoudi</td> <td>27</td> <td>Sanandaj</td> </tr> <tr> <td>7</td> <td>Emad</td> <td>Deris</td> <td>26</td> <td>Mahshahr</td> </tr> <tr> <td>8</td> <td>Seyed Mohammad</td> <td>Mousavi</td> <td>27</td> <td>Hendijan</td> </tr> </tbody> </table> </div>

table { width: 50%; } thead, tbody, tr, td, th { display: block; } thead th { height: 30px; } tbody { overflow-y: auto; height: 150px; } tbody td, thead th { float: left; width: 20%; } tr:after { clear: both; content: ' '; display: block; visibility: hidden; }