Roithamer: WICHTIG: Tabellen mit Scrollbalken

Wie kann man eigentlich Tabellen mit Scrollbalken versehen, so dass der Tabellenkopf stehen bleibt?

Und wie kann man diesen Scrollbalken dann so steuern, dass entweder
gar nicht gescrollt wird oder um exakt eine Zeilenhoehe oder um genau ein Vielfaches der Zeilenhoehe, so dass nie Zeilen 'halb' zu sehen sind?

Ueber einen Tipp wuerde ich mich sehr freuen :-)

Gruss,
Roithamer

  1. Hallo,
    wichtig sind hiert mehr oder weniger alle Fragen. Das "WICHTIG"
    im Betreff ist deshalb mehr als flüssig.
    Außerdem wäre DHTML als Thema sicherlich die bessere Wahl.

    Wie kann man eigentlich Tabellen mit Scrollbalken versehen, so dass der Tabellenkopf stehen bleibt?

    Ich verstehe nicht ganz, was du meinst. Magst du mal erklären?

    Und wie kann man diesen Scrollbalken dann so steuern, dass entweder
    gar nicht gescrollt wird oder um exakt eine Zeilenhoehe oder um genau ein Vielfaches der Zeilenhoehe, so dass nie Zeilen 'halb' zu sehen sind?

    Du willst deinen Besuchern doch nicht ernsthaft vorschreiben, wie
    sie zu scrollen haben. Das kann der Benutzer an seinem Maustreiber
    einstellen, so er denn ein Mausrad hat; mit der Scrollbar kann man
    übrigens auch pixelgenau scrollen.

    Ich glaube, dir erst helfen zu können, wenn du die Ziele dieser gan-
    zen Aktion mal ein wenig näher erläuterst.

    Bye,
    Peter

    1. Hallo,

      vielen Dank fuer Dein Interesse. Dass hier alle Fragen wichtig sind, ist mir schon klar, aber ich habe sehr grosse Probleme, im Web oder gar in Buechern eine Antwort auf mein Problem zu finden, so dass sich allmaehlich eine leise Ahnung in meinem Hinterkopf breit macht, dass das Problem ueberhaupt nicht loesbar ist...

      Ich verstehe nicht ganz, was du meinst. Magst du mal erklären?

      Gern. Wenn man nicht im Web ist, dann gibt es zum Beispiel unter Windows Tabellen, die links oder rechts (meistens rechts) einen vertikalen Scrollbalken haben.
      Desweiteren haben Tabellen auch oftmals Spaltenueberschriften.
      Und da waere es doch fein, wenn diese Spaltenueberschriften stehen blieben, waehrend man den Tabellenrumpf scrollt.

      Das saehe dann schematisch z. B. so aus:

      Ueberschrift 1 | Ueberschrift 2 | Ueberschrift 3
        -----------------------------------------------------
          zelle 28,1        zelle 28,2        zelle 28,3  | |
          zelle 29,1        zelle 29,2        zelle 29,3  | |
          zelle 30,1        zelle 30,2        zelle 30,3  |x|
          zelle 31,1        zelle 31,2        zelle 31,3  |x|
          zelle 32,1        zelle 32,2        zelle 32,3  |x|
          zelle 33,1        zelle 33,2        zelle 33,3  | |
          zelle 34,1        zelle 34,2        zelle 34,3  | |
        -----------------------------------------------------

      Die ersten 27 Zeilen der Tabelle sind nach oben gescrollt,
      die Zeilen 28 bis 34 sind angezeigt, die Zeilen 35 bis 60
      koennen angezeigt werden, indem man den Schieber im Scrollbalken(rechts) nach unten zieht.

      Aber - und darauf kommt es mir an - die Tabellenueberschrift
      wird nicht mitgescrollt.

      Desweiteren achte ich die Anwender-Einstellungen sehr, aber ich sehe keinen Sinn darin, Zeilen nur halb oder teilweise anzuzeugen.
      Daher moechte ich (und das kann konfigurierbar sein, aber die Moeglichkeit moechte ich zur Verfuegung stellen), dass die Zeilen immer ganz oder gar nicht angezeigt werden, die Tabelle also die richtige Hoehe hat und beim Scrollen ein festes Inkrement beachtet wird.

      N.B. Feste Scroll-Inkremente hat zum Beispiel das Windows-Programm Notepad, vielleicht haben Sie es nur noch nicht gemerkt. Und ich kann mein Mausrad auch nur so konfigurieren, dass ich aussuchen darf, um wieviele Zeilen der Text im Notepad scrollen soll...

      Ob nun mein Thema zu JavaScript gehoert oder zu HTML... nun ja, ich durfte leider nur ein Thema angeben. Und was es zum Begriff 'DHTML' zu sagen gibt, da kann ich nur an http://selfhtml.teamone.de/dhtml/intro.htm verweisen.
      Da die Leute fragen, in welcher Sprache ich programmiere, sage ich natuerlich JavaScript, wenngleich ich dieses oft genug fuer dynamische Effekte einsetze.

      Gruss,
      Roithamer

      1. Hallo,

        Aber - und darauf kommt es mir an - die Tabellenueberschrift
        wird nicht mitgescrollt.

        Mozilla (Netscape 6), Opera: <thead style="position: fixed">

        N.B. Feste Scroll-Inkremente hat zum Beispiel das Windows-Programm Notepad, vielleicht haben Sie es nur noch nicht gemerkt. Und ich kann mein Mausrad auch nur so konfigurieren, dass ich aussuchen darf, um wieviele Zeilen der Text im Notepad scrollen soll...

        Ja, das liegt aber daran, dass Notepad eine feste Zeilenhöhe hat,
        ebenso wie jedes Textmailprogramm, die DOS-Eingabeaufforderung etc.

        Woher soll der Browser aber denn nun wissen, wie hoch du die Zeile
        gern hättest? Nehmen wir an, du hast zwei Abstätze, den einen mit
        Schriftgrad 20px, den anderen mit 10px. Jeder Absatz hat 5 Zeilen.
        Sollte der Browser je nach Absatz unterschiedlich weit scrollen?
        Außerdem gäbe es dann Probleme, wenn du vom einen Absatz in den
        nächsten hineinscrollst ... Und was passiert, wenn du zwei div's
        mit unterschiedlicher Zeilenhöhe nebeneinander positioniert hast?

        Bye,
        Peter

  2. hi

    Und wie kann man diesen Scrollbalken dann so steuern, dass entweder
    gar nicht gescrollt wird oder um exakt eine Zeilenhoehe oder um genau ein Vielfaches der Zeilenhoehe, so dass nie Zeilen 'halb' zu sehen sind?

    theoretisch mit <tbody style="height:50px;overflow:auto;"> oder soetwas, aber wie so oft streikt hier der MSIE. Somit wirst du wohl den inneren Teil der Tabelle in ein <div style="height:50px;overflow:auto;"> packen müssen.

    Grüße aus Bleckede

    Kai

    1. Hi Kai,

      theoretisch mit <tbody style="height:50px;overflow:auto;"> oder soetwas, aber wie so oft streikt hier der MSIE. Somit wirst du wohl den inneren Teil der Tabelle in ein <div style="height:50px;overflow:auto;"> packen müssen.

      Grüße aus Bleckede

      Kai

      also, wenn ich innerhalb des tbody-Tags ein div-Tag plaziere, dann erscheint der Scrollbalken oberhalb der Tabelle.
      Und wenn ich das div-Tag um die Tabelle herum plaziere, dann scrollt der kopf mit. Das kann also micht der wahre Jakob sein...

      Gruss,
      Roithamer

      1. »hi

        also, wenn ich innerhalb des tbody-Tags ein div-Tag plaziere, dann erscheint der Scrollbalken oberhalb der Tabelle.
        Und wenn ich das div-Tag um die Tabelle herum plaziere, dann scrollt der kopf mit. Das kann also micht der wahre Jakob sein...

        <table><tr><td>
        <div style="height:100px;overflow:auto;">
        <table><tr><td>....</td></tr></table>
        </div>
        </td></tr></table>

        ..so in der Art.

        Grüße aus Bleckede

        Kai

        1. Hi,

          <table><tr><td>
          <div style="height:100px;overflow:auto;">
          <table><tr><td>....</td></tr></table>
          </div>
          </td></tr></table>

          ..so in der Art.

          Grüße aus Bleckede

          Kai

          Ja so geht es. Scheint wohl die einzige Lösung zu sein...
          man muß noch width=n angeben, wobei n ein Wert (in Pixel) schmaler als die Tabelle ist. Damit wird erreicht, daß sich der Scrollbalken rechts an die Tabelle anschmiegt und nicht irgendwo weit rechts positioniert ist.
          Es kann dann gelingen, Eingabetabellen zu gestalten, die auch bei variabler Tabellenbreite immer direkt rechts einen Scrollbalken haben.
          Bei reinen Eingabetabellen erübrigt sich die Eingabe von width im Style-Tag naturgemäß.

          Jetzt stellt sich aber immer noch die Frage, wie man um ein festes (vorgegebenes) Inkrement scrollen kann.
          Also, wenn auf den unteren Pfeil-Button am Scrollbalken geklickt wird, möchte ich, daß zum Beispiel um 20 Pixel nach unten gescrollt wird.

          P.S:
          Ferner habe ich den Eindruck, daß sich hier im Forum sehr viele Netscape-Fans aufhalten.
          Falls das der eine oder andere von denen hier liest: mich würde es interessieren, wie man für die Netscape-Browser (4.7, 6.2 etc.) Tastensteuerungen realisiert. Für den IE ist das supereinfach (da gibts ein js-script), also muß es doch für Netscape ein Kinderspiel sein, oder?

          Grüße aus dem Kobernaußerwald,
          Roithamer

  3. Hallo Roithamer,

    Wie kann man eigentlich Tabellen mit Scrollbalken versehen, so dass der Tabellenkopf stehen bleibt?

    Tabellenkopf und -fuß bleiben stehen, wenn man die Elemente TBODY, TFOOT und THEAD richtig verwendet. Ruf doch mal das Beispiel aus Selfhtml "selfhtml/html/tabellen/anzeige/thead_tfoot_tbody.htm" auf und ergänze den Quellcode um folgenden Eintrag:
    '<tbody style="overflow:auto;height:35px">'.
    Das Ganze funktioniert allerdings nur im neueren Mozilla, bei mir getestet mit Version 0.9.8. unter Windows 98.

    Alternativ könnte man vielleicht mit Frames etwas basteln, das wird dann aber sehr umständlich.

    Und wie kann man diesen Scrollbalken dann so steuern, dass entweder
    gar nicht gescrollt wird oder um exakt eine Zeilenhoehe oder um genau ein Vielfaches der Zeilenhoehe, so dass nie Zeilen 'halb' zu sehen sind?

    Dafür habe ich auch noch keine Lösung. Wenn dir etwas einfällt, fände ich es schön, wenn du mal ein Quelltext-Beispiel postest.

    Viele Grüße

    Pidder Lüng

    P.S.: Hallo Kai,

    das mit DIV habe ich noch nie probiert. Aber, wie kann man das denn setzen und dabei im Rahmen der Legalität von HTML 4.01 bleiben?

    1. Hallo Pidder,

      das mit DIV habe ich noch nie probiert. Aber, wie kann man das denn setzen und dabei im Rahmen der Legalität von HTML 4.01 bleiben?

      Was spricht denn dagegen?

      Bye,
      Peter

      1. Hallo Peter,

        Was spricht denn dagegen?

        Nichts, wenn es so gemacht wird, wie im Beispiel von Kai um 18.40 Uhr (welches ich interessant finde und mal ausprobieren will). Dann aber sind zwei Tabellen (legal) ineinander verschachtelt.

        Meine Blickrichtung war allerdings starr darauf gerichtet, nur eine Tabelle zu verwenden - und da hätte mir ein div halt nicht geholfen.

        Gruß

        Pidder