Tabelle mit Position: behoben Scrollt nicht mit Überlauf: scroll

Ich habe zwei Tabellen: die erste ist eine Kopfzeile, die zweite enthält Daten. Ich möchte die Kopfzeile sehen, wenn ich nach unten scrolle, also hat seine Tabelle position: fixed. Die Tabellen können zu groß sein, um auf dem Bildschirm angezeigt zu werden, also habe ich sie in ein div mit overflow: scroll; eingewickelt.Tabelle mit Position: behoben Scrollt nicht mit Überlauf: scroll

Mein Problem hier sehen werden: https://jsfiddle.net/xa86wgw9/3/

Wenn ich nach unten scrollen, wird der Header nicht bewegen; das ist, was ich will. Aber wenn ich nach rechts scrolle, bleibt der Header auf der linken Seite ... gibt es eine Möglichkeit, die beiden Tabellen ausgerichtet zu halten? CSS und Javascript können verwendet werden.

EDIT: Ich arbeite derzeit an IE10, so position: sticky ist keine Option.

Quelle

2017-12-05 gobes

prüfen dieses Beispiel. Stellen Sie sicher, dass sich das Fenster in einer Größe befindet, in der beide Bildlaufleisten sichtbar sind.

Ich benutzte zwei Tabellen, eine für den Header und eine andere für den Inhalt. Der Header ist fest positioniert. Wenn Sie horizontal blättern, ändert sich der linke Versatz entsprechend.

Entschuldigung für die grobe Stile und lange Markup!

$(window).scroll(function(){ 
 
    var scrollxValue = $(window).scrollLeft(); 
 
    $('.vertically-fixed').css('left', -scrollxValue) 
 
});

table{ 
 
       width: 2120px; 
 
      } 
 
      .vertically-fixed{ 
 
       position: fixed; 
 
       height: 40px; 
 
      } 
 
      th,td{ 
 
       padding: 5px 10px; 
 
       margin: 0 2px 2px 0; 
 
       width: 110px; 
 
       height: 110px; 
 
       float: left; 
 
      } 
 
      th{ 
 
       background: #ddd; 
 
      } 
 
      td{ 
 
       background: #eee; 
 
      } 
 
      tbody { 
 
       height: 100px; 
 
       overflow-y: auto; 
 
       overflow-x: hidden; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="vertically-fixed"> 
 
      <thead> 
 
       <tr> 
 
        <th>Lorem ipsum</th> 
 
        <th>dolor</th> 
 
        <th>cursus</th> 
 
        <th>tincidunt</th> 
 
        <th>porttitor</th> 
 
        <th>Maecenas</th> 
 
        <th>Fusce tincidunt</th> 
 
        <th>Vivamus</th> 
 
        <th>Lorem ipsum</th> 
 
        <th>dolor</th> 
 
        <th>cursus</th> 
 
        <th>tincidunt</th> 
 
        <th>porttitor</th> 
 
        <th>Maecenas</th> 
 
        <th>Fusce tincidunt</th> 
 
        <th>Vivamus</th> 
 
       </tr> 
 
      </thead> 
 
     </table> 
 
     
 
     <table class="content"> 
 
      <tbody> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
       <tr> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
        <td>01</td> 
 
        <td>02</td> 
 
        <td>03</td> 
 
        <td>04</td> 
 
        <td>05</td> 
 
        <td>06</td> 
 
        <td>07</td> 
 
        <td>08</td> 
 
       </tr> 
 
      </tbody> 
 
     </table>

Quelle

2017-12-05 11:06:47

Ich musste den Rand oben der zweiten Tabelle anpassen, aber es funktioniert! – gobes

yeh! Es überlappte den Inhalt. –

Es ist nicht notwendig2 Tabellen zu verwenden zu erreichen, was Sie want.It von 1 Tabellencode möglich ist, selbst.

Fiddle hier erstellt das Scrollen des Körperabschnitts zu testen und halten die Kopffest http://jsfiddle.net/pxgq1j4p/

Sie

<thead> 
<tbody>

Quelle

2017-12-05 10:20:54 Sonia

@gobes brauchen eine horizontale Scroll auch in dem Header entlang den Inhalt blättern sollte. –

@PonsPurushothaman Wenn ich die Tabelle in ein div verpacke, kann ich erreichen, was ich will, aber es scheint ein bisschen hässlich für mich ... – gobes

Was zu verwenden, da ich seine unmöglich wissen die Tabelle selbst scrollbaren zu machen .

Da Ihre zweite Tabelle auch die Bildlaufoptionen von #firstDiv verwendet, müssen Sie das gleiche für die erste tun, da die erste fest ist und daher nicht innerhalb der #firstDiv für width -Eigenschaften gezählt wird.

dies zu erreichen, habe ich eine wrapperdiv um die erste Tabelle und machte den Wrapper

overflow: scroll;

EDIT mit

behoben: die Geige Siehe: - sry den Link zu aktualisieren vergessen haben, hier Sie gehen https://jsfiddle.net/xa86wgw9/8/

für den zweiten Teil Ihrer Frage benötigen Sie wahrscheinlich etwas Javascript, um beide Tabellen gleichzeitig scrollen zu lassen. aber Sie sollten diesen Teil versuchen, sich zuerst (auch die Lösung jetzt habe ich Zeit fehlt anzuwenden)

Quelle

2017-12-05 10:23:54

Sie position:sticky verwenden können, um zu erreichen, was Sie wollen

fiddle

Quelle

2017-12-05 10:26:05

es ist nicht vollständig unterstützt, zum Beispiel so fr wie ich weiß, dass es nicht funktioniert IE, ref : https://caniuse.com/#feat=css-sticky – Alessio

Leider können einige von uns IE oder Rand ignorieren, wenn sie unsere Netze entwerfen. Dies ist schließlich eine Wirkung, die er erreichen will, dh Benutzer können einfach alle Tabellen nach unten scrollen. –

funktioniert gut für Chrome, aber im Fall von Tabellen nicht einmal für Firefox unterstützt –

Tabelle mit Position: behoben Scrollt nicht mit Überlauf: scroll

Antwort

Verwandte Themen