带有固定标题的表格，带有水平和垂直滚动

Question

我的日历在左侧和右侧都有用户列表 - 带有单元格的日期。最重要的是，当将页面滚动到底部时，我需要修复日期。我不知道我是怎么做到的，因为我有<table> 的主要日期<table> 和overflow: scroll，因为我需要滚动和固定左侧用户。

当滚动到页面底部时，如何修复 <thead> 的顶部日期？现在很简单position: absolute;，因为我有嵌套表和overflow: scroll;。在两个不同的表中拆分表，thead 和 tbody 上的日期？并捕获事件scroll 并将其应用于其他表？

JSFiddle - https://jsfiddle.net/p69j0L5h/2/

附：在实际情况下，所有单元格都是相等的（大约宽度和高度）。这只是一个例子。

Answer 1

您的提议-可行，但这并不意味着您应该那样做。非常复杂的标记，并且您正在以一种不太适合表格的方式拆分表格数据。

双轴粘性/冷冻接头是非常有可能并且非常可行的。

请参考此链接：http://tympanus.net/Tutorials/StickyTableHeaders/index3.html

Answer 2

只需使用

//makes thead stay in fixed position
thead {
 position: fixed;
}

//makes td 100px wide
td {
 width: 100px;  
}

//makes scroll bar on bottom appear up top
table {
 height: 200px; /*think that 100% would work too*/
}

Answer 3

通过更改您的 html 布局，我可以实现您想要的！但我不确定这是否是正确的方法。

html 将如下所示：

<div ng-controller="MainCtrl" class="container main">
  <table class="table table-bordered">
    <thead>
      <tr class="fixed">
      <th>blank space</th>
        <th ng-repeat="date in dates">
          {{date}}
        </th>
      </tr>
    </thead>

  </table>
  <table  class="table table-bordered" style="margin-top:50px">
     <tbody style="margin-top:30px">
      <tr ng-repeat="user in users">
        <td>{{user}}</td>
        <td  ng-repeat="date in dates"></td>
      </tr>
    </tbody>
  </table>
</div>

我已经创建了一个相同的小提琴：https://jsfiddle.net/gpa5v9L7/