冻结可滚动div中的标题行和列

Question

我试图冻结一个表的行和列标题，该表位于固定大小的div可滚动div（overflow: auto）内。您可以看到table / div setup here

的示例

我已经看到一些图书馆打算这样做，但没有一个像我期望的那样工作。我我能够使用固定大小的元素，所以如果有解决方案，那就没关系。

到目前为止，我已经尝试过了：

标题行：

• 对position: fixed使用thead，然后明确指定列的宽度。这感觉它想要工作，但由于div是水平滚动的，当你滚动水平时，标题保持不变...我认为如果div没有水平滚动，这将起作用：example < / LI>
• 尝试了这个问题的大部分答案/插件：Freeze the top row for an html table only (Fixed Table Header Scrolling)

标题列：

• 将position: absolute与left: 0一起使用，这与标题行的第一个点相同 - 似乎它想要工作但是因为div可以垂直滚动，所以行标题会保留为您滚动。
• 在这里尝试了最高评价的答案（类似于第1点中提到的内容）：how do I create an HTML table with fixed/frozen left column and scrollable body?

所以，要重申这个问题，在我的jsFiddle中，我希望数字始终保持可见状态，以及要滚动的块。因此，如果您位于div的最右下方，则其上方的可见标题应为12，其左侧的可见标题应为17。