Javascript 冻结前3列'；html表上的s

我知道这可能是一个重复的问题，但我已经阅读了所有其他问题，我无法让它们在我的代码中工作

当我尝试将绝对位置添加到我的

列时，它们会从表中消失并叠加到下一列

我需要我的前3列封锁，所以当用户滚动左他们留在视图。 我设法做到了这一点，我的标题，但标题是不符合表了，我无法找到自己来修复这个

任何帮助都将不胜感激

这是我的代码：

#滤器{
显示：无；
}
thead>tr，t车身{
宽度：继承；
显示：块；
}
t车身{
高度：800px；
溢出：自动；
}
@节脚本
{
$（'tbody tr'）。悬停（函数（）{
$（this.find（'td'）.addClass（'hovered'）；
}，函数（）{
$（this.find（'td'）.removeClass（'hovered'）；
});
$（函数（）{
$（“#pftable_hdr”）.dataTable（）；
})
函数过滤器（选择器、查询）{
query=$.trim（query）；//修剪空白
query=query.replace（//gi，“|”）；//为regex查询添加或
$（选择器）。每个（函数（）{
（$（this）.text（）.search（new RegExp（query，“i”）<0）？$（this.hide（）.removeClass（'visible'）：$（this.show（）.addClass（'visible'）；
});
}
//普拉蒂略过滤器
$（'tbody tr'）.addClass（'visible'）；//默认每行可见
$（“#过滤器”）.keyup（函数（事件）{
如果（event.keyCode==27 | |$（this）.val（）==''）{//如果按esc键或未输入任何内容
$（this.val（“”）；//如果按esc键，我们希望清除搜索框的值
$（'tbody tr'）.removeClass（'visible'）.show（）.addClass（'visible'）；//如果未输入任何内容，则所有行都匹配，因此所有行都可见
}
否则{
filter（'tbody tr'，$（this.val（））；//如果有文本，让我们进行筛选
}
});
$（“#过滤器”）.show（）；
$（文档）.ready（函数（）{
$（'.filter'）.change（函数（）{
var值=[]；
$（'.filter选项：选定'）。每个（函数（）{
if（$（this.val（）！=“”）值.push（$（this.text（））；
});
过滤器（'表>正文>tr'，值）；
});
函数过滤器（选择器、值）{
$（选择器）。每个（函数（）{
var sel=$（本）；
var tokens=sel.text（）.split（'\n'）；
var toknesObj=[]，i；
对于（i=0；i=0）{
toknesObj[i].found=true；
}
}
});
var计数=0；
$。每个（toknesObj，函数（i，val）{
如果（找到值）{
计数+=1；
}
});
显示=（计数==值.length）；
show？sel.show（）：sel.hide（）；
});
}
});
}
销售时点情报系统
@本文件为FP（“Punto de Venta”）
@this.FP（“lbl.loader.date”）
@date.ToString（“d MMMM，yyyy”）-@date.ToString（“d MMMM，yyyy”）
@本文件为FP（“Turno”）
待办事项
@foreach（Model.Select（l=>l.Rid）.Distinct（）中的变量项）
{
@项目
}
@这个.FP（“PDV:）
待办事项
@foreach（Model.Select（l=>l.Pdv.Distinct（））中的变量项）
{
<div><table>
        <tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><td class="headcol">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>

body { font:16px Calibri;}
table { border-collapse:separate; border-top: 3px solid grey; }
td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
}
div { 
    width: 600px; 
    overflow-x:scroll;  
    margin-left:5em; 
    overflow-y:visible;
    padding-bottom:1px;
}
.headcol {
    position:absolute; 
    width:5em; 
    left:0;
    top:auto;
    border-right: 0px none black; 
    border-top-width:3px; /*only relevant for first row*/
    margin-top:-3px; /*compensate for top border*/
}
.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }