Frozen columns not aligned with scrollable columns (HTML+CSS) - html

Question

I intend to do this:
Left Side Column ---> Frozen
Right Side Column ---> Scrollable
The problem that I'm facing currently is that only <td> part is getting frozen. and the <th> has no effect of the code. I couldn't figure out how to get this fixed? Any help would be much appreciated.
Thanks in advance.
HTML code:
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table" >
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long"><h3>Sheet</h3></th>
<th class="header"><h3>Part Type</h3></th>
<th class="header"><h3>Options</h3></th>
<th class="header"><h3>Customer</h3></th>
<th class="header"><h3>Code</h3></th>
<th class="header"><h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol"><h3>ABC01</h3></td>
<td class="row-content"><h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>
CSS code:
.padding-right-5 {
padding-right: px;
}
.max_width_300 {
max_width : 300px;
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}

Answer 1

Added few fixes. Hope this will get you started.
.padding-right-5 {
padding-right: 5px;
}
.max_width_300 {
max-width : 300px;
}
.long{
position: absolute; /* added this */
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
background: #fff; /*added this */
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table">
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long">
<h3>Sheet</h3></th>
<th class="header">
<h3>Part Type</h3></th>
<th class="header">
<h3>Options</h3></th>
<th class="header">
<h3>Customer</h3></th>
<th class="header">
<h3>Code</h3></th>
<th class="header">
<h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol">
<h3>ABC01</h3></td>
<td class="row-content">
<h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>