Бесконечная таблица прокрутки с фиксированным столбцом

Question

У меня есть таблица, которая заполняется из back-end, используя ng-repeat в одном элементе списка. В таблице есть столбец для даты, которая должна быть исправлена ​​слева, но все еще способна прокручивать вверх и вниз по месяцам.

Все остальные столбцы, которые не являются столбцами Date, должны иметь возможность прокручивать вверх, вниз, влево или вправо. Но при прокрутке вверх или вниз дата всегда должна быть выровнена с правильной строкой.

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

я смог найти эту директиву, привязи див при прокрутке. Это не работает в моем приложении, но это выглядит как возможный шаг в правильном направлении.

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

И это JSfiddle http://jsfiddle.net/gdjz6go5/

Answer 1

гнездо дивы в ячейках таблицы, чтобы обеспечить перелив вам нужно. Вам нужно будет играть с высотами 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/