<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="col-xs-12"> <div id="sailorTableArea"> <table id="sailorTable" class="table table-striped table-bordered" width="100%"> <thead> <tr> <th class="th1">First name</th> <th class="th2">Last name</th> <th class="th3">Position</th> <th class="th4">Office</th> <th class="th5">Age</th> <th class="th6">Start date</th> <th class="th7">Salary</th> <th class="th1">Extn.</th> <th class="th7">E-mail</th> </tr> </thead> <tbody> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> <tr> <td class="td1">Tiger</td> <td class="td2">Nixon</td> <td class="td3">System Architect</td> <td class="td4">Edinburgh</td> <td class="td5">61</td> <td class="td6">2011/04/25</td> <td class="td7">$320,800</td> <td class="td1">5421</td> <td class="td7">t.nixon@datatables.net</td> </tr> </tbody> </table> </div> </div> </div> </div>

#sailorTableArea{ max-height: 300px; overflow-x: auto; /*overflow-y: auto;*/ } #sailorTable{ white-space: normal; } #sailorTable tbody { display:block; height: 240px; overflow:auto; } #sailorTable thead, tbody tr { display:table; /*width:100%;*/ table-layout:fixed; } #sailorTable thead tr .th1 { width: 100px; min-width: 100px; max-width: 100px; } #sailorTable thead tr .th2 { width: 120px; min-width: 120px; max-width: 120px; } #sailorTable thead tr .th3 { width: 80px; min-width: 80px; max-width: 80px; } #sailorTable thead tr .th4 { width: 180px; min-width: 180px; max-width: 180px; } #sailorTable thead tr .th5 { width: 200px; min-width: 200px; max-width: 200px; } #sailorTable thead tr .th6 { width: 160px; min-width: 160px; max-width: 160px; } #sailorTable thead tr .th7 { width: 300px; min-width: 300px; max-width: 300px; } #sailorTable tbody tr .td1 { width: 100px; min-width: 100px; max-width: 100px; } #sailorTable tbody tr .td2 { width: 120px; min-width: 120px; max-width: 120px; } #sailorTable tbody tr .td3 { width: 80px; min-width: 80px; max-width: 80px; } #sailorTable tbody tr .td4 { width: 180px; min-width: 180px; max-width: 180px; } #sailorTable tbody tr .td5 { width: 200px; min-width: 200px; max-width: 200px; } #sailorTable tbody tr .td6 { width: 160px; min-width: 160px; max-width: 160px; } #sailorTable tbody tr .td7 { width: 300px; min-width: 300px; max-width: 300px; }