You are not logged in.

Tabelle scrollbar machen mit fixiertem Tabellenkopf - wie geht das?

wcf.regNote.message

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

1

Wednesday, October 8th 2008, 9:25am

Tabelle scrollbar machen mit fixiertem Tabellenkopf - wie geht das?

Ich habe eine Tabelle die selbst auf großen Bildschirmen noch gescrollt werden muss. Momentan verschwindet beim Scrollen eben immer die Überschriftenzeile so das man immer wieder hoch muss um zu sehen was sich in welcher Spalte befindet. Das ist natürlich sehr nervig. Deswegen möchte ich irgendwie den Kopf fixieren und nur den Inhalt scrollbar machen.
Eine Lösung habe ich bereits gefunden bei selfhtml -> http://aktuell.de.selfhtml.org/artikel/j…belle/index.htm
Mir gefällt nur die Lösung mit Framesets nicht so ganz. Gibt es nicht die Möglichkeit den reinen Inhalt der Tabelle einfach in einen Div Container (Layer) zu packen der selbst scrollbar ist und den rest wie ich es im Moment habe statisch auf der Seite zu belassen? Ich hätte damit noch einen weiteren Vorteil und könnte z.B. 12 Container bauen und in jedem die Daten eines Monats bereit halten und hätte somit 12 Monate in direktem Zugriff ohne das etwas neu laden muss. Ich kann die Container ja via Z-Index sichtbar oder unsichtbar machen.

Die Frage ist nur wie bekomme ich es hin, dass der Container wirklich absolut an der richtigen Stelle anfängt und selbst wenn die Seite ansicht schon scrollbar sein müsste dymanisch vergrößert oder verkleinert wird damit der Container immer passt?
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

bauser

Intermediate

Posts: 384

Occupation: Senior Software Engineer

  • Send private message

2

Wednesday, October 8th 2008, 8:07pm

also ich mache das immer mit div elementen, die dann im td unter der überschriftenzeile kommen. die spalten versuche ich dann per css stylesheets mit z.B. width: 100px; zu setzen, klappt ganz gut, wenn auch nicht immer zu hundert prozent. wenns wirklich immer auf den pixel genau stimmen muss, wäre ja eine möglichkeit per javascript die breite der einzelnen spalten der tabelle auszulesen und dann die breite der überschriftzellen auf die gleiche zu setzen. aber wie gesagt, so, dass es immer hundertpro pixelgenau passt hab ich es noch nicht geschafft, vielleicht auch weil ich bisher noch nicht den anspruch hatte.
I'm Tony Menthanar! You fuck wit me, you fuckin' wit da best!

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

3

Wednesday, October 29th 2008, 11:26pm

Also irgendwie will das bei mir einfach nicht. Ich brauch nur leider ganz dringend da eine Lösung sonst reißt mir jemand den Kopf ab.

Bei der Tabelle wo nichts getrennt ist verlaufen die Tabelleninhalte alle wunderschön übereinander. Trenne ich die Tabelle nun auf was ja grundsätzlich kein Problem ist dann geht das Drama schon los da die Zellen unterschiedlich groß sind. Und da die Seitenbreite und somit auch die Tabellenbreite dynamisch ist finde ich keinen Ansatz wie ich es hin bekomme das die Zellenbreite sowohl der Überschriftenzeile als auch der Inhaltszeilen exakt gleich groß sind.

Das es geht sieht man z.B. auf www.hrs.de wenn man dort einfach mal irgend einen Ort eingibt und dann auf Hotell suchen klickt. Es erscheint eine Liste mit jede Menge Einträgen und die Überschrift bleibt fixiert stehen und der Inhalt scrollt mit.

Weiß jemand wie genau ich das so exakt mache oder kann mir nen Link geben wo beschrieben ist wie das geht? Oder blickt jemand auf der Beispielseite durch und kann mir erklären wie die das geregelt haben?
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

cheahzle

Beginner

Posts: 1

Location: Duisburg

Occupation: Schüler

  • Send private message

4

Tuesday, February 3rd 2009, 3:42pm

Versuch mal ganz einfach ein div zu setzen, bzw einfach <div id="bla">Inhalt</div>

Per CSS kannst du dann zum Beispiel folgendes definieren:
#bla {
width: 750px;
height: 600px;
overflow:auto;
}

heißt ganz einfach, falls du nicht so fit in css bist, dass sollte der Inhalt den vorgegebenen Maßen nicht entsprechen d.h. überschreiten wird automatisch gescrollt, egal in welche Richtung.
Ich hoffe du hast es verstanden :o


Gruß Dario

Prometheus

Administrator

  • "Prometheus" started this thread

Posts: 3,278

  • Send private message

5

Tuesday, April 14th 2009, 11:20am

Also ich weiß echt nicht aber ich bekomme den Schrott einfach nicht hin. Egal ob ich es mit CSS oder mit JS oder sonst wie versuche das geht immer in die Hose. Entweder die Tabelle ist verzerrt und nichts passt überein oder das Scrollen geht nicht oder sonst was. Aber das es irgendwie gehen muss weiß ich da auf der Seite www.hrs.de wenn man ein Hotel sucht und dann die Liste mit den Hotels bekommt genau das passiert was ich möchte. Die Spalten stehen absolut genau übereinander und der Kopf bleibt stehen und der Inhalt ist einwandfrei scrollbar. Ich werd bei denen nur aus dem Quelltext nicht wirklich schlau.

Hat noch wer einen Lösungsansatz oder so oder vielleicht sogar schon mal genau das Problem selbst gehabt und irgendwie gelöst?
Jedwege Anfragen bitte an Technomausi oder ShaoKhan richten. Dieses Konto ist und bleibt inaktiv.

davil

Beginner

Posts: 36

Location: Wien

Occupation: Entwickler

  • Send private message

6

Tuesday, April 14th 2009, 3:36pm

Quoted from "Prometheus"

Also ich weiß echt nicht aber ich bekomme den Schrott einfach nicht hin. Egal ob ich es mit CSS oder mit JS oder sonst wie versuche das geht immer in die Hose. Entweder die Tabelle ist verzerrt und nichts passt überein oder das Scrollen geht nicht oder sonst was. Aber das es irgendwie gehen muss weiß ich da auf der Seite www.hrs.de wenn man ein Hotel sucht und dann die Liste mit den Hotels bekommt genau das passiert was ich möchte. Die Spalten stehen absolut genau übereinander und der Kopf bleibt stehen und der Inhalt ist einwandfrei scrollbar. Ich werd bei denen nur aus dem Quelltext nicht wirklich schlau.

Hat noch wer einen Lösungsansatz oder so oder vielleicht sogar schon mal genau das Problem selbst gehabt und irgendwie gelöst?
Noch nie selbst gebraucht aber gerade ausprobiert und erfolgreich getestet:
Damit das Tabellen-Markup sauber ist, sollte sie ohnehin in thead und tbody unterteilt sein, also so:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<table>
  <thead>
    <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
      <th>Spalte 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zelle 1-1</td>
      <td>Zelle 1-2</td>
      <td>Zelle 1-3</td>
    </tr>
    <tr>
      <td>Zelle 2-1</td>
      <td>Zelle 2-2</td>
      <td>Zelle 2-3</td>
    </tr>
  </tbody>
</table>

Wenn du thead und tbody getrennt hast, brauchst du nur per CSS tbody auf eine fixe Höhe setzen und dann overflow-y auf "auto", dann kannst du in der Tabelle vertikal scrollen und der thead-Teil bleibt einfach stehen.

Source code

 
1
2
3
4

tbody {
  height: 400px;
  overflow-y: auto;
}

Mit overflow: auto geht das natürlich in beiden Achsen.

davil
~~~ ihr seid alle krank! ~~~ :D

wcf.user.socialbookmarks.titel