가로 및 세로 스크롤이있는 테드가 고정 된 테이블

Question

왼쪽 및 오른쪽 사용자 목록이있는 캘린더가 있습니다. 셀과 날짜가 있습니다. 맨 위에 스크롤 페이지가있을 때 날짜를 수정해야합니다. 나는 스크롤과 고정 된 왼쪽 사용자가 필요하기 때문에 내가 <table>과 <table>에 overflow: scroll이라는 날짜를 가지고 있기 때문에 나는 그것을 어떻게 만들 수 있는지 모른다.

<thead> 페이지의 맨 아래로 스크롤 할 때 상단에 날짜가 표시 될 수 있습니까? 그것은 이제 position: absolute; 중첩 테이블과 overflow: scroll; 때문에 간단합니다. 두 개의 다른 테이블에있는 thead와 tbody에 날짜가있는 분할 테이블? 이벤트 scroll을 붙잡고 다른 테이블에 적용 하시겠습니까?

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

P.S. 실제 상황에서는 모든 셀이 동일합니다 (너비와 높이에 대해). 이것은 단지 예일뿐입니다.

Answer 1

귀하의 제안 -can- 일을하지만 당신이 그것을해야 의미하지는 않습니다 방법. 끔찍하게 복잡한 마크 업과 표의 데이터를 테이블에 적합하지 않게 분할하고 있습니다.

2 축 스티커/냉동 헤더는 매우 가능하고 매우 유용합니다.

다음 링크를 참조하십시오. http://tympanus.net/Tutorials/StickyTableHeaders/index3.html

Answer 2

그냥 HTML 레이아웃의 변화에 ​​

//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이 다음과 같이 표시됩니다

<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/