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

You can use sticky position. Here is a sample code. This is HTML/CSS solution. No js is required.

.view {
  margin: auto;
  width: 600px;
}

.wrapper {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 100px;
}

  

    

      

        

          
Number
          
First Name
          
Last Name
          
Employer
        
      
      

        

          
1
          
Mark
          
Ham
          
Micro
        
        

          
2
          
Jacob
          
Smith
          
Adob Adob Adob AdobAdob Adob Adob Adob Adob
        
        

          
3
          
Larry
          
Wen
          
Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog
        
      
    
  

Bootply code: https://www.bootply.com/g8pfBXOcY9