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

For me this was the only one that worked perfectly (thanks to Paul O'Brien!): https://codepen.io/paulobrien/pen/gWoVzN

Here's the snippet:

// requires jquery library
jQuery(document).ready(function() {
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
 });

  .table-scroll {
    position:relative;
    max-width:600px;
    margin:auto;
    overflow:hidden;
    border:1px solid #000;
  }
.table-wrap {
	width:100%;
	overflow:auto;
}
.table-scroll table {
	width:100%;
	margin:auto;
	border-collapse:separate;
	border-spacing:0;
}
.table-scroll th, .table-scroll td {
	padding:5px 10px;
	border:1px solid #000;
	background:#fff;
	white-space:nowrap;
	vertical-align:top;
}
.table-scroll thead, .table-scroll tfoot {
	background:#f9f9f9;
}
.clone {
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}
.clone th, .clone td {
	visibility:hidden
}
.clone td, .clone th {
	border-color:transparent
}
.clone tbody th {
	visibility:visible;
	color:red;
}
.clone .fixed-side {
	border:1px solid #000;
	background:#eee;
	visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}

  

    

      

        

          
 
          
Header 2
          
Header 3
          
Header 4
          
Header 5
          
Header 6
          
Header 7
          
Header 8
        
      
      

        

          
Left Column
          
Cell content

            test
          
Cell content longer
          
Cell content
          
Cell content
          
Cell content
          
Cell content
          
Cell content
        
        

          
Left Column
          
Cell content
          
Cell content longer
          
Cell content
          
Cell content
          
Cell content
          
Cell content
          
Cell content
        
        

          
Left Column
          
Cell content
          
Cell content longer
          
Cell content
          
Cell content
          
Cell content
          
Cell content
          
Cell content
        
        

          
Left Column
          
Cell content
          
Cell content longer
          
Cell content
          
Cell content
          
Cell content
          
Cell content
          
Cell content
        
        

          
Left Column
          
Cell content
          
Cell content longer
          
Cell content
          
Cell content
          
Cell content
          
Cell content
          
Cell content
        
        

          
Left Column
          
Cell content
          
Cell content longer
          
Cell content
          
Cell content
          
Cell content
          
Cell content
          
Cell content
        
      
      

        

          
 
          
Footer 2
          
Footer 3
          
Footer 4
          
Footer 5
          
Footer 6
          
Footer 7
          
Footer 8
        
      
    
  


See position Sticky version with no JS