Jquery 使用scrollTop/scrollLeft-角单元格冻结标题/列

我读了很多关于冻结栏/标题的问题，但没有发现任何类似我的问题。这一问题最能说明：

我的问题是左上角的单元格“col1”。如果向上滚动，该列中的数据将覆盖Col 1标题。我们希望数据在标题下，而不是在标题上，就像所有其他标题单元格一样。如果向左滚动，col1标题将消失，我希望它与列一起移动

这个简单的滚动代码的所有其他功能都很好，只要我能弄清楚如何处理这个角单元格就好了

JS:

HTML:

图例：。。。。
第1列
第2列
....
第13栏
第14列
数据1
数据2
....
数据13
数据14
数据1
数据2
...
数据13
数据14
....

注意：我们已经尝试了各种固定头插件，但它们比它们的价值更麻烦。我们在这个表上面有动态列、动态元素等等。我们希望坚持使用这个简单的代码，它可以很容易地应用于我们网站上的任何列表

---

谢谢你的帮助

为col1-th-like制作css

thead th:first-child{
    position:relative;
    z-index:10;
}

---

fiddle

我在你的fiddle中看到数据现在在列1标题下（很好！），但当我向左滚动时，列1标题仍然没有出现。@vivasuzi它现在移动了，但我不理解逻辑，column1数据是否应该与column1 head一起移动？实际上，当我向左滚动时，column1中的数据似乎正在消失。我要找的是，当你向左滚动时，列1像excel一样“冻结”，包括标题。@vivasuzi如果理解正确，那么这里是解决方案是的！看起来是这样的：）让我在代码中尝试一下，然后再报告。

<table id="requestList" class="highlighter dataTable" width="100%" style="width: 100%;" cellspacing="0" cellpadding="2">
    <thead class="top">
        <tr role="row">
            <th colspan="14" style="background:#FFFFCC;color:black;text-align:left;">Legend: ....</th>
        </tr>
        <tr id="HeaderRow" role="row">
            <th>Col 1</th>
            <th>Col 2</th>
            ....
            <th>Col 13</th>
            <th>Col 14</th>
        </tr>
    </thead>
    <tbody id="tableBodyDiv" class="reqList" role="alert" aria-live="polite" aria-relevant="all">
        <tr>
            <td class="">Data 1</td>
            <td class="">Data 2</td>
            ....
            <td class="">Data 13</td>
            <td class="">Data 14</td>
        </tr>
        <tr>
            <td class="">Data 1</td>
            <td class="">Data 2</td>
             ...
            <td class="">Data 13</td>
            <td class="">Data 14</td>
        </tr>
        ....
    </tbody>
</table>

thead th:first-child{
    position:relative;
    z-index:10;
}