Table header to stay fixed at the top when user scrolls it out of view with jQuery

Question

I am trying to design an HTML table where the header will stay at the top of the page when AND ONLY when the user scrolls it out of view. For example, the table may be 500

Answer 1

you can use this approach, pure HTML and CSS no JS needed :)

.table-fixed-header {
  display: flex;
  justify-content: space-between;
  margin-right: 18px
}

.table-fixed {
  display: flex;
  justify-content: space-between;
  height: 150px;
  overflow: scroll;
}

.column {
  flex-basis: 24%;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}
.column .title {
  border-bottom: 2px grey solid;
  border-top: 2px grey solid;
  text-align: center;
  display: block;
  font-weight: bold;
}

.cell {
  padding: 5px;
  border-right: 1px solid;
  border-left: 1px solid;
}

.cell:nth-of-type(even) {
  background-color: lightgrey;
}

  
  
  



    
    

      col 1
    
    

      col 2
    
    

      col 3
    
    

      col 4
    
    
  
  
  

    
    

      
alpha
      
beta
      
ceta
    
    
    

      
alpha
      
beta
      
ceta
      
alpha
      
beta
      
ceta
      
alpha
      
beta
      
ceta
    
    
    

      
alpha
      
beta
      
ceta
      
beta
      
beta
      
beta
      
    
    
    

      
alpha
      
beta
      
ceta