javascript - 具有多个内部表的表和具有水平滚动的固定表头表

Question

我一直在使用一个包含 3 个内表的表。第三个表的宽度更宽并且具有水平滚动。

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

我尝试了各种插件 floathead 和 fixedheadertable 但水平的东西打破了它。

我有我的 jsfiddle 示例，任何人都可以告诉我方法吗

http://jsfiddle.net/warlockdn/qyrjvnvv/2/

我愿意重组表格，但不确定要采取什么方式？

这是基本结构

<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>

Answer 1

使用带有滚动事件的 jQuery 来实现。尝试:

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

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

示例:http://jsfiddle.net/uj313udL/

更新我已经修改了很多你的代码。我在所有标题上都添加了宽度。它适用于 Firefox 和 Chrome。请尝试:

示例:http://jsfiddle.net/nzdhs4wq/