How do I create an HTML table with a fixed/frozen left column and a scrollable body?

Question

I need a simple solution. I know it\'s similar to some other questions, like:

• HTML table with fixed headers and a fixed column?
• How can I lock the fir

Answer 1

A little late but I did run across this thread when trying out solutions for myself. Assuming you're using modern browsers nowadays, I came up with a solution using CSS calc() to help guarantee widths met up.

.table-fixed-left table,
.table-fixed-right table {
  border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
  border: 1px solid #ffffd;
  padding: 5px 5px;
}
.table-fixed-left {
  width: 120px;
  float: left;
  position: fixed;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: left;
  border: 1px solid #ffffd;
  z-index: 2;
}
.table-fixed-right {
  width: calc(100% - 145px);
  right: 15px;
  position: fixed;
  overflow-x: scroll;
  border: 1px solid #ffffd;
  white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
  padding: 5px 10px;
}

  

    

      
Normal Header
    
    

      
Header with extra line
        
 
    
    

      
Normal Header
    
    

      
Normal with extra line
        
 
    
    

      
Normal Header
    
    

      
Normal Header
    
  


  

    

      
Header
      
Another header
      
Header
      
Header really really really really long
    
    

      
Info Long
      
Info
        
with second line
      
Info
        
with second line
      
Info Long
    
    

      
Info Long
      
Info Long
      
Info Long
      
Info Long
    
    

      
Info
        
with second line
      
Info
        
with second line
      
Info
        
with second line
      
Info
    
    

      
Info
      
Info
      
Info
      
Info
    
    

      
Info
      
Info
      
Info
      
Info
    
  

Hope this helps someone!