将 DIV 元素绑定到溢出滚动条答案

【问题标题】：Tie DIV element to overflow scrollbar将 DIV 元素绑定到溢出滚动条
【发布时间】：2018-09-07 23:03:43
【问题描述】：

我正在尝试创建一个允许我修复标题的数据网格表。我已将表格放在两个 DIV 元素中，并修复了表格的 THEAD 部分。我动态填充表格，可以有不同数量的列，并且每次可能有不同的宽度。

<DIV style="position: relative; width="500px">
 <DIV style="height:105px; overflow: auto;">
  <TABLE width="502px">
    <THEAD>
      <TR style="left:-1px;top: 0;position: absolute;">
        ... header content ...
      </TR>
    </THEAD>
    <TBODY>
      ... data columns ...
    </TBODY>
  </TABLE>
 </DIV>
</DIV>

该解决方案适用于垂直溢出。但是，我正在与水平溢出作斗争。因为我修复了 THEADs TR 元素，所以如果我的表格超过了 DIV 宽度，就会出现水平滚动条，我可以水平滚动数据，但标题是静态的，不会滚动。

我在想，如果我可以获取动态创建的滚动条的 ID/名称，我可能能够以某种方式使用 jQuery 滚动表头，但我不知道这是否是正确的解决方案，或者它是否是正确的解决方案可能。

【问题讨论】：

不用jQuery，可以用css position: fixed。
对不起，我不得不更新这个问题（我最初混淆了我的垂直和水平）
@Raminson - 我尝试了position:fixed 的建议，但没有奏效（可能是因为它是对先前问题的回应，垂直/水平颠倒了。

标签： javascript jquery css html-table

【解决方案1】：

很多人尝试使用 html 和 css 为表格制作固定的标题和左列，在滚动时保持不变，不幸的是它不起作用。

您唯一的选择是使用 javascript 在表格滚动时对其进行操作。我没有要推荐的具体代码，但请做一些谷歌搜索。

【讨论】：

由于我找到了here 的解决方案，保持原状似乎是一件容易的事。水平滚动和移动标题 TR 对我来说是个问题。
@NEW2WEB 我知道。就像我说的 - 它不能在纯 HTML/CSS 中完成。如果需要，还需要使用 javascript。
谢谢，但这就是我要找的，我不需要它是纯 CSS/HTML。那你有什么例子吗？
@NEW2WEB 我曾经使用过jquery floatheader。主要是因为它是谷歌上第一个满足我需要的链接。还有很多其他功能，例如排序和重新排列列。