Infinite Scroll-Tabelle mit fester Spalte

Question

Ich habe eine Tabelle, die aus dem Back-End mit einer ng-Wiederholung auf einem einzelnen Listenelement gefüllt wird. Die Tabelle enthält eine Spalte für das Datum, das auf der linken Seite korrigiert werden muss, aber dennoch in den Monaten nach oben und unten blättern kann.

Alle anderen Spalten, die nicht die Datumsspalte sind, sollten nach oben, unten, links oder rechts scrollen können. Beim Scrollen nach oben oder unten sollte das Datum immer mit der richtigen Zeile ausgerichtet sein.

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

konnte ich diese Anweisung finden, die Divs anbindet beim Scrollen. Es funktioniert nicht in meiner App, aber es sieht wie ein möglicher Schritt in die richtige Richtung aus.

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

Und dieses JSfiddle http://jsfiddle.net/gdjz6go5/

Answer 1

Nest divs in Tabellenzellen den Überlauf zu schaffen, die Sie benötigen. Sie müssen mit CSS-Höhen auf den li spielen, um einen flüssigen Tisch nachzuahmen.

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

Geige: https://jsfiddle.net/judsonmusic/8Lzbb0dn/