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

The latest addition position:'sticky' would be the simplest solution here

.outer{
    overflow-y: auto;
    height:100px;
    }

.outer table{
    width: 100%;
    table-layout: fixed; 
    border : 1px solid black;
    border-spacing: 1px;
}

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}

 

 

             

              
col1
              
col2
              
col3
              
col4
               
col5
             

                       
            

              
data
              
data
               
data
              
data
              
data
            

             

               
data
              
data
               
data
              
data
              
data
            

             

                
data
              
data
               
data
              
data
              
data
            

             

                
data
              
data
               
data
              
data
              
data
            

             

                 
data
              
data
               
data
              
data
              
data
            

             

                 
data
              
data
               
data
              
data
              
data