固定列の無限スクロールテーブル

Question

単一のリスト項目でng-repeatを使用してバックエンドから読み込まれるテーブルがあります。このテーブルには、左側に固定する必要があるが、その月まで上下にスクロールできる日付の列があります。

[日付]列以外の列は、上下左右にスクロールできなければなりません。しかし、上下にスクロールするときには、日付は常に正しい行に合わせる必要があります。

<div class="grid-headers"> 
 
\t <div class="grid-column-date grid-header-item">Date</div> 
 
\t <div class="grid-column-col1 grid-header-item">Col1</div> 
 
\t <div class="grid-column-col2 grid-header-item">Col2</div> 
 
\t <div class="grid-column-col3 grid-header-item">Col3</div> 
 
</div> 
 

 
<ul class="grid-content"> 
 
    <li ng-repeat="item in vm.gridItems" class="grid-row"> 
 
     <div class="grid-column-date grid-row-item"></div> 
 
     <div class="grid-column-col1 grid-row-item"></div> 
 
     <div class="grid-column-col2 grid-row-item"></div> 
 
     <div class="grid-column-col3 grid-row-item"></div> 
 
    </li> 
 
</ul>

UPDATE：

私は、スクロール時にdivを係留このディレクティブを見つけることができました。それは私のアプリでは動作しませんが、正しい方向に可能なステップのように見えます。

How do I synchronize the scroll position of two divs using AngularJS?

そして、このJSfiddle必要なオーバーフローを提供するために、表のセル内http://jsfiddle.net/gdjz6go5/

Answer 1

ネストのdiv。流体テーブルを模倣するために、李のcssの高さで遊ぶ必要があります。

<style> 
table { 
    width: 200px; 
} 

table, 
th, 
td { 
    border: 1px solid black; 
} 

table, 
td div.div1 { 
    border: 1px solid black; 
    height: 50px; 
    overflow-y: scroll; 
} 

table, 
td div.div2 { 
    border: 1px solid black; 
    height: 50px; 
    overflow-x: scroll; 
    overflow-y: scroll; 
    width: 200px; 
} 

ul { 
    padding: 0; 
    margin 0; 
} 
</style> 

<table> 
    <thead> 
    <tr> 
     <th>Date</th> 
     <th>Col1</th> 
     <th>Col2</th> 
     <th>Col3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div class="div1"> 
      <ul> 
      <li>Date 1</li> 
      <li>Date 2</li> 
      <li>Date 3</li> 
      <li>Date 4</li> 
      <li>Date 5</li> 
      </ul> 
      <div> 
     </td> 
     <td colspan=3> 
     <div class="div2">asldkjlkasjd 
      <table> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      </table> 

     </div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

フィドル：https://jsfiddle.net/judsonmusic/8Lzbb0dn/