Table fixed header and scrollable body

Question

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or

Answer 1

In my eyes, one of the best plugins for jQuery is DataTables.

It also has an extension for fixed header, and it is very easily implemented.

Taken from their site:

HTML:

    

        

            
Name
            
Position
            
Office
            
Age
            
Start date
            
Salary
        
    

    

        

            
Name
            
Position
            
Office
            
Age
            
Start date
            
Salary
        
    

    

        

            
Tiger Nixon
            
System Architect
            
Edinburgh
            
61
            
2011/04/25
            
$320,800
        
        

            
Garrett Winters
            
Accountant
            
Tokyo
            
63
            
2011/07/25
            
$170,750
        
        

            
Ashton Cox
            
Junior Technical Author
            
San Francisco
            
66
            
2009/01/12
            
$86,000
        
  

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

But the simplest you can have for just making a scrollable is:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});