Wie kann man eine Tabelle, die breiter als die Bildschirmgröße ist, scrollen und die Kopfzeile fixieren lassen?

Ich habe eine table mit 2 Spalten und jede Spalte ist 800px breit. Ich möchte diese Tabelle im 800x50-Fenster anzeigen. Es sollte also eine horizontale und vertikale Bildlaufleiste geben, um die vollständige Tabelle anzuzeigen.Wie kann man eine Tabelle, die breiter als die Bildschirmgröße ist, scrollen und die Kopfzeile fixieren lassen?

Während ich einige verwandte Lösungen (this und this) auf SO gefunden habe, funktionieren sie nur, wenn die Tabellenbreite kleiner als die Bildschirmgröße ist. In meinem Fall ist die Bildschirmgröße 1200px und die gesamte Tischbreite beträgt 1600px.

Wie könnte ich das tun? Ich möchte etwas wie this erreichen.

BEARBEITEN Hoppla, ich habe vergessen, eine weitere Anforderung hinzuzufügen. Es tut uns leid. Ich möchte, dass der Header der Tabelle fest bleibt, während der Benutzer die Tabelle scrollt.

EDIT2

Ich habe unten genannte Lösungen versucht, in einem div zu wickeln, aber in diesem Fall vertikale Bildlaufleiste nach oben zeigt nicht. Bitte sehen Sie this table mit Wrapper Div. Es scheint, dieses Problem tritt nur auf, wenn die Tabellenbreite größer als die Bildschirmgröße ist. Ich teste auf FF3.6.

EDIT3

aktuelle table Code. Dies hat keinen vertikalen Scroller, obwohl ich vertikal scrollen kann.

<div style="overflow:scroll; width:800px;height:50px" > 
<table style="width:1600px" border="1"> 
    <thead> 
    <tr> 
     <th style="width:800px">id_1</th> 
     <th style="width:800px">id_1</th> 
    </tr> 
    </thead> 
    <tbody style=""> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    </tbody> 
</table> 
</div>

Quelle

2010-04-13 understack

Es tut mir leid, aber 800x50 ist eine unbrauchbare Dimension. Scrollbalken allein nehmen etwa 20px in Anspruch, wodurch Sie mit 30px spielen können ... also bitten Sie Ihre Benutzer, mit einer oder zwei Reihen gleichzeitig zu scrollen? Sicher, du meintest nicht 800x500? – Robusto

Das sind gefälschte Zahlen, ich möchte nur diesen Tisch arbeiten lassen und dann die Abmessungen entsprechend ändern. – understack

Sie können die Tabelle in ein div mit einer festen Größe (800x50) einbinden und overflow:scroll festlegen.

Quelle

2010-04-13 18:38:59

@Vivin Paliath: Ich sehe keine vertikale Scroll mit diesem wenn die Tischlänge größer ist als die Bildschirmgröße. Bitte sehen Sie dies: http://jsbin.com/uwubu3/3 – understack

Ich sehe die Bildlaufleisten fein, wenn ich es öffne. Meinst du Fenstergröße? Wenn die Tabelle größer als die Fenstergröße ist, müssen Sie die gesamte Seite scrollen, um die Bildlaufleisten anzuzeigen. Es gibt keine Möglichkeit, das zu ändern, um dann die Größe der Tabelle an die Größe des Fensters anzupassen. –

Ich sehe auch die Bildlaufleisten nicht, aber ich glaube, das liegt daran, dass deine Höhe zu klein ist. Versuchen Sie, Ihre Höhe auf 100px zu setzen, und es wird gut funktionieren. –

Setzen Sie Ihren Tisch in einem div mit einer Breite < 800 und eingestellt overflow: scroll.

Quelle

2010-04-13 18:38:44

Ich weiß nicht, ob es funktionieren würde, aber haben Sie versucht, max-width: 100% für die Seite zu setzen?

Quelle

2010-04-13 18:40:13 animuson

Fügen Sie einfach overflow:scroll in die CSS Ihres Tabellenelements ein. Übrigens. Ihr Beispiel zeigt kein Scrollen.

Quelle

2010-04-13 18:41:11

@Paul de Vrieze: behoben das Beispiel. Jetzt zeigt es Scrollen, aber nur horizontal. – understack

Wenn Sie wollen, dass der Header fixiert bleiben Sie nur einige CSS tun

#header { 
    position:fixed; 
    left:0; 
    top:0; 
}

Quelle

2010-04-13 18:58:23 Catfish

Wie kann man eine Tabelle, die breiter als die Bildschirmgröße ist, scrollen und die Kopfzeile fixieren lassen?

Antwort

Verwandte Themen