Tailwind css table with fixed header and scrolling tbody vertically

Question

I have the code below for a table based on tailwind css.

If I remove the block class, the table is not scrollable anymore.

Adding the block class to tbody breaks the thead. See Images attached.

CodePen if you want to play with the code. https://codepen.io/hirani89/pen/wvyJKqO?editors=1010


  Recipient
  
    
      
        
          
            
          
          
        
      
      
        
          
            
              
                
                  
                    
                      Select
                    
                    
                      Company
                    
                    
                      Address
                    
                  
                
                
                  
                    
                      
                    
                    
                      BATHURST 
                    Address Here Address Here Address Here Address Here Address Here Address Here 
                  
                  
                    
                      
                    
                    
                      BATHURST
                    
                    Address Here Address Here Address Here Address Here Address Here Address Here 
                  
                  
                    
                      
                    
                    
                      MUDGEE
                    
                    Address Here Address Here Address Here Address Here Address Here Address Here 
                  
                  
                    
                      
                    
                    
                      ORANGE
                    
                    Address Here Address Here Address Here Address Here Address Here Address Here 
                  
                  
                    
                      
                    
                    
                      TAREN POINT
                    
                    Address Here Address Here Address Here Address Here Address Here Address Here

Without block class in tbody (disables scroll)

With block class in tbody (scroll works but header breaks)

herrstrietzel · Accepted Answer

You could add a max-height to your table's parent div and
set position:sticky and top:0 for your thead

Example




  
    
      
        
          

            

              
                

                  
                    
                      

                        
                          
                            
                              
                                
                                  Select
                                
                                
                                  Company
                                
                                
                                  Address
                                
                              
                            
                            
                              
                                
                                  
                                
                                
                                  BATHURST 
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  BATHURST
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  MUDGEE
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  ORANGE
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  TAREN POINT
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  BATHURST 
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  BATHURST
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  MUDGEE
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  ORANGE
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  TAREN POINT
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  BATHURST 
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  BATHURST
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  MUDGEE
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  ORANGE
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here 
                              
                              
                                
                                  
                                
                                
                                  TAREN POINT
                                
                                Address Here Address Here Address Here Address Here Address Here Address Here

In plain css:

.table-wrp  {
  max-height: 75vh;
  overflow-y: auto;
  display:block;
}
thead{
  position:sticky;
  top:0
}

Tailwind css table with fixed header and scrolling tbody vertically

Answers (2)

Example

In plain css:

Related Questions