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

If you're developing something more complicated and want multiple columns to be fixed/stuck to the left, you'll probably need something like this.

.wrapper {
    overflow-x: scroll;
}

td {
    min-width: 50px;
}

.fixed {
    position: absolute;
    background: #aaa;
}

  


      

        

          

            
aaa
            
aaa2
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
        
          
        
        

          

            
aaa
            
aaa2
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
          
          

            
bbb
            
bbb2
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f
            
a
            
b
            
c
            
d
            
e
            
f