Jürgen: Tabelle mit scrollbarem Inhalt und fester Kopfzeile

SELF-Forum

Tabelle mit scrollbarem Inhalt und fester Kopfzeile

Jürgen
– Informationen zu den Bewertungsregeln

Ich möchte eine Tabelle mit variablem Inhalt ausgeben und diesen Bereich scrollen. Das dies nicht mit NS4 funktioniert, ist mir klar, aber IE5 und NS6 genügen.
Die Tabelle scrollen ist kein Problem, aber die Spaltenüberschriften scrollen immer mit. Ich könnte die Spaltenüberschriften natürlich außerhalb der Tabelle angeben, aber dann muss ich feste Spaltenbreiten verwenden, da sonst die Spaltenüberschriften abhängig vom Tabelleninhalt nicht mehr passen.

Folgendes Coding funktioniert, wenn auch mit Scrollen der Überschrift. Ich habe schon einige Varianten dazu ausprobiert, aber nix funktioniert.

<html>
<head>
 <title>Tabelle Demo</title>
</head>

<body>
 <div style="height:150px; overflow:scroll">
  <table>
   <thead><tr><th>kopf</th></td></thead>
   <tfoot><tr><th>fuß</th></td></tfoot>
   <tbody>
    <tr><td>zeile 1 </td></tr>
    <tr><td>zeile 2 </td></tr>
    <tr><td>zeile 3 </td></tr>
    <tr><td>zeile 4 </td></tr>
    <tr><td>zeile 5 </td></tr>
    <tr><td>zeile 6 </td></tr>
   </tbody>
  </table>
 </div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

    Christian Kruse
    – Informationen zu den Bewertungsregeln

    Joho,  <-- das nennt sich Begruessung

    Ich möchte eine Tabelle mit variablem Inhalt ausgeben und diesen
    Bereich scrollen. Das dies nicht mit NS4 funktioniert, ist mir
    klar, aber IE5 und NS6 genügen.
    Die Tabelle scrollen ist kein Problem, aber die
    Spaltenüberschriften scrollen immer mit. Ich könnte die
    Spaltenüberschriften natürlich außerhalb der Tabelle angeben,
    aber dann muss ich feste Spaltenbreiten verwenden, da sonst die
    Spaltenüberschriften abhängig vom Tabelleninhalt nicht mehr
    passen.

    [...]

    Was du suchst, sind nicht Tabellen, sondern Frames. Der Sinn und Zweck
    von Tabellen ist ein anderer als der von Frames.

    Gruss,
     CK

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

      Armin G. Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Tach auch,

      Was du suchst, sind nicht Tabellen, sondern Frames. Der Sinn und Zweck
      von Tabellen ist ein anderer als der von Frames.

      Interpretationssache. In der HTML 4.01 spec steht unter http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 folgendes:

      "Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data."

      Insbesondere den zweiten Satz kann man so interpretieren dass die Kopf- und Fusszeile beim scrollen feststehend bleiben sollen (z.B. weil sie die Spaltenbezeichnungen enthalten) waehrend nur die Daten im Hauptteil (sofern dieser laenger als eine Bildschirmseite ist) scrollen.

      Im Prinzip so aehnlich wie in einer Tabellenkalkulation wo man eine Kopfzeile eingeben kann, die beim Scrollen feststeht oder beim Drucken auf jeder Seite ausgegeben wird.

      Nur gibt es meines Wissens keinen Browser bei dem das implementiert ist, ich frage mich auch wie das ueberhaupt gehen sollte. Angenommen ich bin auf einer Seite die eine Tabelle enthaelt, woher weiss der Browser ob ich die Tabelle oder die Seite scrollen will?

      Gruss,
      Armin

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

        Jürgen
        – Informationen zu den Bewertungsregeln

        Hallo Armin,
        Du hast mein Problem genau erkannt.
        Der Browser hat allerdings keine Problem, zu erkennen, was gescrollt werden soll. Ein meinem Beispiel funktioniert es ja, wenn auch die Kopfzeilen mitscrollen. Die Tabelle hat ja einen eigenen Scrollbalken.

        Gruß

        Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

    Sonia
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich weiss zwar nicht ob das dass wahre ist aber
    du koenntest die Tabelle ohne Kopfzeile in eine
    zweite Tabelle setzen

    ------------------------
    |        |       |      |    Kopfzeile
    ------------------------
    |[------]|[-----]|[----]|
    ||  T   |||  T  |||  T ||    T= Text
    |[------]|[-----]|[----]|
    -------------------------

    Gruss
    Sonia

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

    Thomas Rupp
    – Informationen zu den Bewertungsregeln

    Hallo Jürgen,

    Codebeispiel:
    <table border="1" width="450" height="100">
      <tr><th>Works in IE and Mozilla</th></tr>
      <tr><td width="450" height="100">
           <div style="width:100%;height:100%;overflow:auto">
                <script>for(i=0;i<50;i++) document.write("Many text in here... ");</script>
           </div>
      </td></tr>
    </table>

    einen guten Artikel zum Thema Tabellen findest Du unter
    http://www.siteexperts.com/tips/databinding/ts06/paper/dhtml_table.htm
    http://www.siteexperts.com/forums/viewConverse.asp?d_id=6555
    http://www.siteexperts.com/forums/viewConverse.asp?d_id=6804

    Weiteres Beispiel unter:

    http://www.geocities.com/dutch_eek1/html/colors.html

    Hth
    Thomas Rupp

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

      Jürgen
      – Informationen zu den Bewertungsregeln

      Hallo Thomas,
      Danke für deine Bemühungen, aber ich fürchte, für mein Problem gibt es keine Lösung.
      Alle Beipspiele laufen darauf hinaus, nur innerhalb einer Tabellenzelle zu scrollen oder die Überschrift steht außerhalb der Tabelle.
      In beiden Fällen habe ich das Problem, dass die Spalten der Überschrift nicht zu den Spalten des TBODY passen. (Außer ich gebe die Spaltenbreite fix an, aber das möchte ich nicht, da die Inhalte variabel sind).

      Ich hatte es mir ähnlich wie in dem Beispiel vorgestellt, nur eben ohne vertikal scrollende THEAD.

      Gruß

      Jürgen

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

        Jürgen
        – Informationen zu den Bewertungsregeln

        Zusatz: ich habe Tabellen mit vielen Spalten.

        einfaches Beispiel:
        <html>
        <head>
         <title>Tabelle Demo</title>
        </head>
        <body>
          <div style="height:150px; width:200px; overflow:scroll">
          <table border=1>
           <thead><tr><th>Spalte 1</th><th>Spalte 2</th></td></thead>
           <tfoot><tr><th>Fuß 1</th><th>Fuß 2</th></td></tfoot>
           <tbody>
            <tr><td>zeile 1 </td><td>spalte 2 </td></tr>
            <tr><td>zeile 2 </td><td>spalte 2 </td></tr>
            <tr><td>zeile 3 </td><td>spalte 2xxxxxxxx </td></tr>
            <tr><td>zeile 4 </td><td>spalte 2 </td></tr>
            <tr><td>zeile 5 </td><td>spalte 2 </td></tr>
            <tr><td>zeile 6 </td><td>spalte 2 </td></tr>
           </tbody>
          </table>
         </div>
        </body>
        </html>

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

          Thomas Rupp
          – Informationen zu den Bewertungsregeln

          Hallo Jürgen,

          geh' mal auf http://www.ibmlink.ibm.com/usalets&parms=H_301-206
          und sieh Dir das "floating TOC" auf der linken Seite an.
          So was ähnliches hab ich mal irgendwo für Dein Tabellenproblem gesehen.
          Solange der Tabellenheader auf der Seite platziert ist, passiert gar nichts. Erst wenn Du weiter runter scrollst und der Header eigentlich am oberen Rand verschwinden würde, rückt er wie in obigem Beispiel nach.
          Wäre das was für Dich?
          Falls ja, würde ich die Suche nach diesem Ding starten (falls Alzheimer's Alois nichts dagegen hat).

          Gruß
          Thomas

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  4. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

    Sönke
    – Informationen zu den Bewertungsregeln

    Hallo Jürgen!

    Was Du willst funktioniert gelaube ich nur im Mozilla. Da wäre das dann auf Dein Beispiel bezogen:

    <html>
    <head>
     <title>Tabelle Demo</title>
    </head>
    <body>
      <table border=1>
       <thead><tr><th>Spalte 1</th><th>Spalte 2</th></td></thead>
       <tfoot><tr><th>Fuß 1</th><th>Fuß 2</th></td></tfoot>
       <tbody style="height:150px; width:200px; overflow:scroll">
        <tr><td>zeile 1 </td><td>spalte 2 </td></tr>
        <tr><td>zeile 2 </td><td>spalte 2 </td></tr>
        <tr><td>zeile 3 </td><td>spalte 2xxxxxxxx </td></tr>
        <tr><td>zeile 4 </td><td>spalte 2 </td></tr>
        <tr><td>zeile 5 </td><td>spalte 2 </td></tr>
        <tr><td>zeile 6 </td><td>spalte 2 </td></tr>
       </tbody>
      </table>
    </body>
    </html>

    Viele Grüße,
    Sönke

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. thead, tfoot, tbody

      Stefan Einspender Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Sönke,

      Was Du willst funktioniert gelaube ich nur im Mozilla. Da wäre das dann auf Dein Beispiel bezogen:

      eben dieses Beispiel hat mich darauf gebracht mal zu schauen, welche
      Browser thead, tfoot und tbody korrekt unterstützen.

      http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss
      http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3

      Mozilla unterstützt das folgende Beispiel korrekt:

      <html><head><title>test</title></head><body>
      <table>
      <thead><tr><th>thead</th></tr></thead>
      <tfoot><tr><th>tfoot</th></tr></tfoot>
      <tbody>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      <tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr><tr><td>tbody</td></tr>
      </tbody>
      </table>
      </body>
      </html>

      Soll ich jetzt sagen, dass ich angenehm überrascht bin oder das ich
      es erwartet hatte? ;-)

      BTW habe ich da gleich auch mal eine "Fehlermeldung" zu SELFHTML 8.0
      geschrieben, weil der imho wesentliche Aspekt nicht erwähnt wird:
      "When long tables are printed, the table head and foot information
      may be repeated on each page that contains table data."

      Viele Grüße,
      Stefan

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Tabelle mit scrollbarem Inhalt und fester Kopfzeile

      Jürgen
      – Informationen zu den Bewertungsregeln

      Hallo Sönke,
      dein Beispiel ist genau das, was ich suche.
      Es funktioniert mit NS 6.2, leider nicht mit NS4, IE5, IE6.
      Na ja, wer mit Browsern obskurer Hersteller arbeitet, die sich nicht an die Vorschläge des W3-Konsortiums halten ....

      <html>
      <head>
      <title>Tabelle Demo</title>
      </head>
      <body>
        <table border=1>
         <thead><tr><th>Spalte 1</th><th>Spalte 2</th></td></thead>
         <tfoot><tr><th>Fuß 1</th><th>Fuß 2</th></td></tfoot>
         <tbody style="height:150px; width:200px; overflow:scroll">
          <tr><td>zeile 1 </td><td>spalte 2 </td></tr>
          <tr><td>zeile 2 </td><td>spalte 2 </td></tr>
          <tr><td>zeile 3 </td><td>spalte 2xxxxxxxx </td></tr>
          <tr><td>zeile 4 </td><td>spalte 2 </td></tr>
          <tr><td>zeile 5 </td><td>spalte 2 </td></tr>
          <tr><td>zeile 6 </td><td>spalte 2 </td></tr>
         </tbody>
        </table>
      </body>
      </html>

      Danke

      Jürgen

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln