固定表头或固定第一列

Question

我想在有人向下滚动时修复我的表头(thead)，或在有人向左或向右滚动时修复第一列(.first-column)。下面你可以看到我的表格的一个例子。它可以包含大约100列和1000个单元格，这就是我需要它的原因。

我想这在纯css中是不可能的，但也许我错了。无论如何，我想请求帮助来解决这个问题。我正在使用jQuery 2.x。

<table>
  <thead>
    <tr>
      <td class="first-column"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  ...
    </tbody>

</table>

asdfasdf

Answer 1

您可以通过设置表头偏移量来固定滚动事件的位置来完成此操作

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

Refer在堆栈上提出了类似的问题。