固定磁贴水平和垂直滚动表

Question

我有日历与左侧和右侧的用户列表 - 日期与细胞。顶部我需要修复日期时滚动页面底部。我不知道我怎么能做到这一点，因为我有<table>与主要<table>与overflow: scroll日期，因为我需要滚动和固定左侧用户。

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

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

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

Answer 1

你的命题-can-的工作，但是，这并不意味着你应该做的是办法。非常复杂的标记，并且以表格数据不适合的方式拆分表格数据。

双轴粘性/冷冻头是非常可能的，相当可行。

请参阅此链接：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/