Javascript 滚动时如何修复表格标题

我的表

thead

有2个

tr

，其中colspan和rowspan不同，如下图所示：

大学
奥萨多
实现
阿蒂吉门托无结果-变量ção
结果多
结果多
瓦里亚诺
%
阿廷。
...

我需要在滚动时修复此表的标题，因此，我发现以下代码：

这段代码几乎可以工作，当我滚动时，标题是固定的，但列宽与此图片不匹配

有人能帮我吗？

试试这个例子

td{
边框底部：1px实心#ccc；
填充物：5px；
文本对齐：左；/*IE*/
}
td+td{
左边框：1px实心#ccc；
}
th{
填充：0 5px；
文本对齐：左；/*IE*/
}
.标题背景{
边框底部：1px纯黑；
}
/*上面这是装饰性的，不是测试的一部分*/
.固定桌集装箱{
宽度：50%；
高度：200px；
边框：1px纯黑；
利润率：10px自动；
背景色：白色；
/*上面是装饰性的或有弹性的*/
位置：相对；/*可以是绝对的，也可以是相对的*/
衬垫顶部：30px；/*收割台高度*/
}
.固定桌内容器{
溢出x：隐藏；
溢出y：自动；
身高：100%；
}
.标题背景{
背景色：#D5ECFF；
高度：30px；/*收割台高度*/
位置：绝对位置；
排名：0；
右：0；
左：0；
}
桌子{
背景色：白色；
宽度：100%；
溢出x：隐藏；
溢出y：自动；
}
.th内部{
位置：绝对位置；
排名：0；
线高：30px；/*割台高度*/
文本对齐：左对齐；
左边框：1px纯黑；
左侧填充：5px；
左边距：-5px；
}
.第一{
左边界：无；
左侧填充：6px；
}
/*对于复杂标题*/
.复杂的固定桌集装箱{
衬垫顶部：60px；/*收割台高度*/
溢出-x:隐藏；/*用于边框*/
}
.complex.header背景{
高度：60px；
}
.复杂的顶部.内部{
边框底部：1px纯黑；
宽度：100%
}
.复杂底部.内部{
顶部：30px；
宽度：100%
}
.complex top.third.th内部{/*双行单元格*/
高度：60px；
边框底部：无；
背景色：#D5ECFF；
}

第一和第二
第三
弗斯特
第二
弗斯特
弗斯特
弗斯特
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
弗斯特
第二
第三
最后
最后
最后

您正在寻找跨浏览器支持吗？您需要设置列宽，如果您将其设置为worksHmm，则需要执行以下操作。有一种纯粹的CSS方式（

position:sticky

），但不幸的是，这种方式只适用于最新的Chrome浏览器。正在等待其他浏览器的支持。请参阅此链接，它可能对您有用

<table id="header-fixed">
    <thead>                     
        <tr id="tr1" role="row" style="background-color: rgb(204, 9, 47);">
            <th rowspan="2" colspan="1">Unidade</th>
            <th rowspan="1" colspan="1">Orçado</th>
            <th rowspan="1" colspan="1">Realizado</th>
            <th rowspan="1" colspan="3">Atingimento no Resultado - Variação</th>
        </tr>
        <tr id="tr2" role="row" style="background-color: rgb(204, 9, 47);">
            <th rowspan="1" colspan="1">Resultado</th>
            <th rowspan="1" colspan="1">Resultado</th>
            <th rowspan="1" colspan="1">Variação</th>
            <th rowspan="1" colspan="1">%</th>
            <th rowspan="1" colspan="1">Ating.</th>
        </tr>
    </thead>
...
</table>