固定磁貼水平和垂直滾動表

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/