[ungelöst]Frage zu Tabellen in Html

Diskutiere [ungelöst]Frage zu Tabellen in Html im Programmierung Forum im Bereich Software Forum; Hallo @all! Ich habe eine Seite wo ich Daten aus einer Datenbank lese und diese Werte dann trage ich in eine Tabelle ein. Wie ist es möglich das...
M

ModellbahnerTT

Threadstarter
Mitglied seit
20.04.2005
Beiträge
3.778
Alter
39
Hallo @all!

Ich habe eine Seite wo ich Daten aus einer Datenbank lese und diese Werte dann trage ich in eine Tabelle ein. Wie ist es möglich das der Tabellenkopf mitwandert wenn ich nach unten und zur Seite scrolle?

Danke im Voraus für eure Antworten.

ModellbahnerTT

PS: Ich habe auch PHP zur Verfügung jedoch kein Javascript.
 
F

Freak

Mitglied seit
02.10.2002
Beiträge
1.101
Alter
33
Standort
Gundelfingen (Donau)
Mach doch einfach 2 Frames ohne Border rein. Dann bleibt das Teil immer oben stehen. :D

Gruß Freak
 
M

ModellbahnerTT

Threadstarter
Mitglied seit
20.04.2005
Beiträge
3.778
Alter
39
Frames gehen leider nicht da der Frame nicht mit vertikal automatisch mitscrollt und die Daten soviel sind das sie nicht auf eine Seite passen.

ModellbahnerTT
 
froemken

froemken

SPONSOREN
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
40
Standort
Im Oberbergischen
Das hier ist die einzige Möglichkeit, wie ich es machen würde:

HTML:
<html>
<body>
<div style="width: 500px;">
  <table width="300px" border="2">
  <tr>
  <td width="150">Spalte 1</td>
  <td width="150">Spalte 2</td>
  </tr>
  </table>
  <div style="width: 440; height: 500px; overflow: auto; border: 0px;">
  <table width="300px" border="2">
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  <tr>
  <td width="150">Wert 1</td>
  <td width="150">Wert 2</td>
  </tr>
  </table>
  </div>
</div>
</body>
</html>
Du brauchst einen weiteren Scrollbalken, weil mit dem Hauptscroller scrollst du ja immer die komplette Seite, wenn du nicht mit Frames arbeitest.

Stefan
 
Y

Yanou

Mitglied seit
07.12.2005
Beiträge
567
Alter
35
Standort
Berlin
das wird ihm leider nicht helfen ... wenn du jetzt zum bsp einen längeren text hast der die zellen länge ändert wird sich der kopf nicht mit anpassen!

also käse ^^

was du machen kannst ist jeder zelle in der obersten zeile eine id/namen geben ... von denen fragst du dann nach laden der tabelle per javascript jeweils die breite ab und schreibst einen horizontal-statischen Tabellen kopf ... der scrollt dann per js code nicht mit hoch/runter aber links/rechts ... isn bisserl umständlich und mit arbeit verbunden aber meiner meinung nach die universellste lösung die du finden kannst ...

gäbe auch noch die möglichkeit des doch mit 2 frames zumachen ... und wenn man im unteren frame scrollt (links/rechts) das man des per js abfängt und den oberen frame mit scrollen läst ... wobei aber auch das problem mit der anpassung der zellen länge / breiter bleibt ...

beides etwas arbeit aber relativ simple ... nur ein nachteil: js muss aktiviert sein im browser ...

Gruß Yanou
 
DerZong

DerZong

MODERATOR/FAQ-Team
Team
Mitglied seit
12.10.2004
Beiträge
4.677
Alter
41
Yanou, dein Ehrgeiz in allen Ehren. Aber Modellbahner hat ausdrücklich gesagt, dass im Javascript definitiv nicht zur Verfügung steht (Siehe hier)
Aber auch zu Framesets hat er ähnliches gesagt.

Edit:

@Modellbahner: Hast du es schonmal mit IFrames ausprobiert?
Wie du so etwas bewerkstelligen kannst: Du greifst froemkens Ansatz auf, tust die Daten-Tabelle aber in eine separate Datei. Diese bindest du dann mit Hilfe eines IFrames unter der Überschriften-Tabelle ein.

Ich hab hier mal das Beispiel von SelfHTML aufgeführt:
HTML:
<iframe src="../../../index.htm" width="90%" height="400" name="SELFHTML_in_a_box">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis
  aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>
Du müsstest dann nur noch die richtige Höhe und Breite einstellen.
 
H

HWFlo

Mitglied seit
04.09.2005
Beiträge
5.271
Alter
31
möglich wäre auch ein periodisches wiederholen des headers wie es z.b. in phpmyadmin üblich ist

(I)Frames sind meiner meinung nach eine relativ unschöne lösung die du nur anwenden solltest wenn neben dem Javascript auch das periodische wiederholen des Headers keine akzeptble Lösung darstellt
 
D

dago

Mitglied seit
05.09.2005
Beiträge
269
Alter
35
Standort
Rheinland-Pfalz
Es gibt dafür 3 Lösungen:
  1. Positionieren des Containers mit position: fixed;
    Das ist die einfachste Lösung. Allerdings spielt da der Internet Explorer 6 und vorherige nicht mit: http://www.css4you.de/position.html
    Internet Explorer 7 kann es nun auch! :blush
  2. Positionieren mir JavaScript.
    Wobei, beim scrollen flackert dann der positionierte Container. Man kennt es von den Menüs. Einfach weil zum Positionieren eine Funktion geschreiben müsste, die mit Abständen ausgeführt werden müsste, um festzustellen, was den nun der sichtbare Bereich ist.
  3. Oder fest positionieren mit position: absolute; und overflow: auto;
    Diese Lösung ist etwas komplizierter und erfordert einiges an Anpassung! Auch kann es zu Problemen unter Opera 6 und vorherige führen: http://www.css4you.de/overflow.html

    Also ersteinmal muss der Browser eigener Scrollbalken verschwienden. Dies ereichen wir mit:
    HTML:
    html, body
    {
     overflow: hidden;
    }
    Dann wird ein Container angelegt, der den komplette Inhalt der Seite enthält, allerdings nicht die fest positionierten Elemente, die beim scrollen stehen bleiben sollen:
    HTML:
    #side
    {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
    }
    Man kann auch auf position: absolute;, top: 0;, left: 0; verzichten. Dann können die erwähnten Elemente mit im Container enthalten sein.

    Durch overflow: auto; werden die Browser eigene Scrollbalken nachgebildet.


    Nun muss noch das fest zu positionierende Container positioniert werden:
    HTML:
    #head
    {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100px;
     background-color: #CCCCCC;
     text-align: center;
     z-index: 1;
    }
    Wichtig ist hiert der z-index: 1; oder höher, damit der Container im Vordergrund angezeigt wird.


    Hier ein kleines Beispiel:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta name="generator" content="Webweaver v1.6.7 [http://webweaver.ws]" />
    
    <style type="text/css">
    <!--
    html, body
    {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
    }
    
    #head
    {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100px;
     background-color: #CCCCCC;
     text-align: center;
     z-index: 1;
    }
    
    #side
    {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
    }
    
    #long_div
    {
     width: 2000px;
     height: auto;
     border: 1px solid #FFCC99;
     margin-top: 120px;
     margin-bottom: 20px;
    }
    
    //-->
    </style>
    
    </head>
    <body>
    
    <div id="head">
        <h1>Titel</h1>
    </div>
    
    <div id="side">
        <div id="long_div">- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -- Langer langer Text -</div>
        <br />
        <div>
            Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />
            Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!<br /><br />Bisl Text!
        </div>
    </div>
    
    </body>
    </html>

    So weit so gut. Damit ist die Positionierung erledingt, allerdings müssen noch ein paar Unschöncheiten beseitigt werden, da z.B. der Scrollbalken vom positionierten Container verdekt wird. Dies muss aber nach Style individuell angepasst werden.

    Deswegen erstmal nix weiter von mir. ;)
 
Andy

Andy

Administrator
Team
Mitglied seit
16.08.2001
Beiträge
12.370
Alter
44
Standort
Wilder Süden
Es ging ihm aber um eine Tabelle :blink
 
Thema:

[ungelöst]Frage zu Tabellen in Html

[ungelöst]Frage zu Tabellen in Html - Ähnliche Themen

  • Firefox 30 steht zum Download bereit - wichtiges Problem weiterhin ungelöst

    Firefox 30 steht zum Download bereit - wichtiges Problem weiterhin ungelöst: Sieben Wochen nach dem letzten Versionssprung gibt es jetzt ein Update, mit dem der Browser Firefox von Mozilla sozusagen runden Geburtstag feiern...
  • [ungelöst, weil unlösbar] Excel rundet beim Multiplizieren??????

    [ungelöst, weil unlösbar] Excel rundet beim Multiplizieren??????: Moin, da habe ich in Excel (2003) folgende Eingaben gemacht: Zelle A1: 15890 Zelle A2: 65332 Zelle A3: 17192 Zelle A4: 98711 und in Zelle A5...
  • UNGELÖST - Hardware Assistant findet keine Treiber

    UNGELÖST - Hardware Assistant findet keine Treiber: Moin moin ich habe den selben Fehler auf meinem Laptop wie in diesem Beitrag...
  • [UNGELÖST] WLAN Probleme

    [UNGELÖST] WLAN Probleme: Hi Leute ich habe früher intensiv online gespielt und naja, ich habe es einstellen müssen wegen meinen WLAN Problemen! folgendes: habe dieses...
  • [ungelöst] bitte hilfe, probleme beim ersetzen einer sata-raid1 platte mit xp

    [ungelöst] bitte hilfe, probleme beim ersetzen einer sata-raid1 platte mit xp: hab folgendes problem: hab xp auf einem sata-raid 1 verbund zweier 200gb samsung platten an einem asus A8Nsli deluxe. (nvidia raid controller...
  • Ähnliche Themen

    Oben