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

In HTML5, you can use CSS style.transform.
However, i reccomend you "swipe between pages" turn off If you implement on Mac.

look at sample codePen

let l  = 0;
let t  = 0;

const MouseWheelHandler = (e) => {
  // vertical scroll
  if (e.deltaX == -0) {
    // t = t - e.deltaY

  // horizonal scroll
  } else if (e.deltaY == -0) {
    l = l - e.deltaX
    if (l >= 0) {
      l = 0;
      document.getElementById("gantt_task").style.transform = "translateX(1px)"
      document.getElementById("gantt_task_header").style.transform = "translateX(1px)"
      return false
    } 
    document.getElementById("gantt_task").style.transform = "translateX(" + l.toString() + "px)"
    document.getElementById("gantt_task_header").style.transform = "translateX(" + l.toString() + "px)"
  }
  return false;
}

window.addEventListener("wheel", MouseWheelHandler, false);

.row {
  border-bottom: 1px solid #979A9A
}
#gantt_grid_header {
  height:   30px;
  width:    100px;
  position: fixed;
  z-index:  3;
  top:      0px;
  left:     0px;
  border:   1px solid #cecece;
  background-color: #F08080;
}     

#gantt_task_header {
  height:   30px;
  width:    400px;
  position: fixed;
  z-index:  2;
  top:      0px;
  left:     100px;
  border:   1px solid #cecece;
  background-color: #FFC300;
}

#gantt_grid {
  width:    100px; 
  height:   400px;
  position: absolute;
  left:     0px;
  top:      0px;
  z-index:  1;
  border:   1px solid #cecece;
  background-color: #DAF7A6;
}

#gantt_task {
  width:    400px; 
  height:   400px;
  position: absolute;
  left:     100px;
  top:      0px;
  border:   1px solid #cecece;
  background-color: #FF5733;
}

    

      HEADER
    
    

      
V Scroll OK
      
V Scroll OK
      
V Scroll OK
      
V Scroll OK
      
V Scroll OK
      
V Scroll OK
      
V Scroll OK
      
V Scroll OK
      
V Scroll OK
    
    

      DATA HEADER
    
    

      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK
      
Vertical,Horizenal Scroll OK