Javascript 具有多个内部表格的表格和具有水平滚动的固定标题表格

我一直在使用一张有3张内桌的桌子。第三张桌子的宽度更宽，有水平卷轴

我一直在尝试修复每个表的标题，相信我，我尝试了所有的解决方案，但在互联网上没有一个解决方案具有与我相同的功能（或者可能是我找不到）

我尝试了各种各样的插件floathead和fixedheadertable，但是水平的东西破坏了它

我有我的JSFIDLE示例，有人能给我指路吗

我愿意重组桌子，但不确定该怎么办

这是基本结构

<table>
    <thead>
        <tr>
            <td>&nbsp;</td>
            <td>Latest</td>
            <td>Oil Majors</td>
        </tr>
    </thead>
    <tbody>
        <td>
            <table></table>
        </td>
        <td>
            <table></table>
        </td>
        <td>
            <table></table>
        </td>
    </tbody>
</table>

最新的
石油巨头

使用jQuery和scroll事件进行此操作。尝试：

$(document).ready(function() {
    $.each($("thead"),function(){
        $(this).css({position:'relative'})
    })

    $(window).scroll(function(){
        $("thead").css({top:$(window).scrollTop()})
    })
})

例如：

更新 我修改了你的很多代码。我在所有标题上添加了宽度。它可以与Firefox和Chrome配合使用。请尝试：

例如：

所以

在@Frank的帮助下，我让桌子按我的需要工作

使用他给的密码。因为表不会占据相对于行或列的位置。我在每个下添加了一个div，并更改了jquery代码以捕获该类

$.each($(".stick_top"),function(){
    $(this).css({position:'relative'})
})

$(window).scroll(function(){
    console.log($(window).scrollTop())
    $(".stick_top").css({top:$(window).scrollTop()})
})

---

现在很好用。谢谢你，弗兰克。

我不太理解你的问题，你想达到什么目的？如果你看到JSFIDLE示例，有一个主表，其中有3个表。第三个表格位于石油巨头下，有一个水平卷轴。我想做的是，把船头固定在卷轴上，用于船舶、最新船舶和石油巨头。基本上所有的单元格都是绿色的，以固定在滚动条上。谢谢你的帮助。但不确定它是否对你有利？因为，我没看到桌子的头被固定在上面？再次感谢。这很奇怪。我干得不错。在小提琴中，琴头是锁定的，第一行显示在琴头下方。当您滚动目录行时，请在标题下滚动。这不是你想要的？不确定。我走了一半，直到箱子中间，头球没有粘在我这边。是的，我想要和你写的一样的东西，很遗憾，我看不出这对我有用。更新：-适用于firefox。不是chrome。你的浏览器是什么？使用chrome。还有firefox。Chrome似乎不起作用。但在firefox中，它工作正常。一个小问题。因此，我在原始页面中的表格位于底部。因此，顶部是从窗口滚动的顶部计算出来的。一旦我在显示表格的容器中，有可能触发它吗？哎呀，我太傻了。我做到了。工作压力让我很困惑你知道我什么时候最需要它。